React JS의 useNavigate 후크

useNavigate 후크는 React JS로 프로그래밍하는 동안 내가 가장 좋아하고 사용하기 쉬운 후크 중 하나입니다. 유사하지만 오래된 useHistory 후크의 더 많은 기능을 제공하며 더 쉬운 호환성과 더 많은 기능만 제공합니다. 페이지를 탐색하고 애플리케이션의 특정 URL로 리디렉션하기 위한 매우 간소화된 접근 방식을 제공합니다.

시작한다:

useNavigate는 이전 React Router Dom 버전의 useHistory 후크를 대체하므로 React Router Dom v6이 필요합니다. 이 패키지를 설치하려면:

npm install history@5 react-router-dom@6

그런 다음 React Router에서 후크를 구현하려는 기능 구성 요소로 후크를 가져와야 합니다.

import { useNavigate } from 'react-router';

참고: useNavigate는 기능 구성 요소에서만 사용할 수 있으며 클래스 구성 요소에는 사용할 수 없습니다.

다음:

기능 구성요소 내부의 useNavigate 후크와 동일한 변수를 정의하십시오. 구별을 위해 "내비게이션"이라고 부르겠습니다.

let navigate = useNavigate();

그 다음에:

구성 요소 내 어디에서나 변수를 호출하고 해당 경로로 리디렉션하기 위해 정의된 경로를 전달합니다. 이 경우 클릭 시 지정된 경로로 다시 라우팅하기 위해 onClick 함수 내에서 navigate('/shoppingCart')를 호출합니다.

function Home() {
  let navigate = useNavigate();
  function redirect() {
    navigate('/shoppingCart')
  }
  return (
    <div>
      <button onClick={redirect}>View Shopping Cart</button>
    </div>
  )
}

추가로:

원래 페이지로 돌아가기 위해 useNavigate에 숫자 인수를 전달할 수 있습니다.

function ShoppingCart() {
  let navigate = useNavigate();
  function redirect() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={redirect}>Back to Home</button>
    </div>
  )
}

여기에서 특정 경로(예:/home) 대신 이전 페이지로 돌아가는 숫자 인수 -1을 전달한다는 것을 알 수 있습니다.

마찬가지로 이전 페이지로 다시 라우팅하기 위해 -1이 useNavigate()에 전달되는 동안 1은 히스토리에 있는 다음 페이지로 다시 라우팅됩니다.


읽어 주셔서 감사합니다. 이 짧은 튜토리얼이 도움이 되었기를 바랍니다.