React-Router.2 Hooks

react-router-dom의 Hooks(훅) 사용하여 라우팅

react-router-dom 5.1v 부터 3가지의 hooks을 제공합니다.
설치는 이전과 동일합니다.

터미널에 react-router-dom 설치
1. yarn add react-router-dom
2. npm install react-router-dom

1.useHistroy

useHistory는 일반적인 history 객체와 똑같은 객체를 가지므로 사용법이 동일합니다. 또한 withRouter hoc를 사용하지 않아도 됩니다.

useHistory 훅을 import합니다.

import { useHistory } from 'react-router-dom';

import한 useHistory()를 변수에 저장하고 useHistory()에 내장 된 여러 기능들을 사용하면 됩니다.

import React from 'react';
import { useHistory } from 'react-router-dom';

function Detail(){

  let history = useHistory();  //변수에 저장

  return (
  <div>
      </div>
        <button onClick={()=>{ history.push('/Cart') }}>장바구니</button>  //history.push()
        <button onClick={()=>{ history.goBack() }}>뒤로가기</button>   //history.goBack()
      </div>
  </div>  
  )
};

2. useLocation

useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks 입니다. 현재페이지의 url을 가져오고 URL이 변경될 때마다 새 위치를 반환합니다.

import React from 'react';
import { useLocation} from 'react-router-dom';

function Detail(){

 const location = useLocation();

 useEffect(() => {
    console.log(location);
 }, []);
};

console.log에 pathname과 search라는 객체를 가져오고 쿼리스트링 정보를 얻을 수 있습니다.

2. useParams

useParams은 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장하며, destructuring 문법을 이용해서 따로따로 변수에 저장이 가능하다.

  let { 파라미터1, 파라미터2 } = useParams();

URL 매개 변수의 key/value 쌍의 객체를 반환한며 path parmeter 정보를 얻을 수 있다.

import React from 'react';
import { useParams} from 'react-router-dom';

function Detail(){

 let {id} = useParams(); // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.

// 현재 주소의 값이 http://localhost:30001/1 일때
console.log(id); // console.log에 "1"이 출력된다.
};