useNavigate

function Product(props) {
  const navigate = useNavigate();

  const goToDetail = () => {
    navigate(`/product/${props.id}`);
  }
  
  return (
    <div className="productContainer" onClick={goToDetail}>
	...
    </div>
  )
}

• navigate는 함수다. 이동하고자 하는 url이나 정수값을 넣어 원하는 경로로 이동할 수 있다.

navigate(-1); // 뒤로 가기
navigate(-2); // 뒤로 2페이지 가기
navigate(1);  // 앞으로 가기

useLocation

function ProductDetail(props) {
  const location = useLocation();
  console.log(location);
  
  return (
    ...
  )
}

• useLocation 훅을 실행하면 경로 정보를 담고 있는 객체를 반환한다.
• 임의로 객체를 location이라는 변수에 할당해주었고 콘솔로 출력해보면 결과는 다음과 같다.

{
  pathname: '/product/1', 
  search: '', 
  hash: '', 
  state: null, 
  key: 'default'
}

• 여기서 주목해야 할 정보는 pathname과 search다.
• pathname : 현재 경로 값
• search : 현재 경로의 query parameter 값

useParams

function ProductDetail(props) {
  const params = useParams();
  
  console.log(params);

  return (
    ...
  )
}

• useParams 훅을 실행하면 path parameter 정보를 담고 있는 객체를 반환한다.
• params의 결과를 출력해보면 다음과 같다.

{
  id: 1
}

• 여기서 id(키)의 값인 1은 Router에서 :id로 표기해준 값이다.

<BrowserRouter>
  <Routes>
    <Route path='/product/:id element={<ProductDetail />} />
  </Routes>
</BrowserRouter>