useNavigate

react-router-dom v6버전부터 새로 생긴 useNavigate 에 대해 써보려 합니다.
사실 useNavigate로 url이동을 처음 배웠어서 저에게는 Link가 더 생소한 개념입니다.

useNavigate 사용법

npm install react-router-dom@6으로 react-router-dom v6버전을 설치해 줍니다.

useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있게 해줍니다.
즉 어떠한 이벤트(클릭, 포커스, 입력 제출 등)가 생겼을 때, url이 변경됩니다. 우리는 이 기능을 Link를 통해 구현할 수 있었습니다.

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

function App() {
  return (
    <div className="App">
      <Link to="/about"><button>about</button></Link>
    </div>
  );
}

export default App;

위 코드는 Link를 사용한 url의 이동입니다. to의 값에 원하는 경로를 넣어주면 됩니다.

import { useNavigate } from "react-router-dom"

function App() {
  const navigate = useNavigate()
  return (
    <div className="App">
      <button onClick={()=>navigate('/about')}>about</button>
    </div>
  );
}

export default App;

위 코드는 useNavigate를 사용한 url의 이동입니다.

const navigate = useNavigate()

위 코드로 useNavigate를 사용해 navigate변수를 선언합니다. 그 후 navigate는 이벤트 핸들러 함수 내에서 사용됩니다.

useNavigate의 기능

History

useNavigate는 특정한 경로만을 나타내는게 아니라 뒤로가기와 앞으로가기 기능을 손쉽게 구현할 수 있습니다.

import { useNavigate } from "react-router-dom"

function App() {
  const navigate = useNavigate()
  return (
    <div className="App">
      <button onClick={()=>navigate(-1)}>뒤로가기</button>
    </div>
  );
}

export default App;

navigate변수 안에 -1(뒤로가기), -2(뒤로가기 2번), +1(앞으로 가기) 등을 넣어 히스토리 기능을 만들 수 있습니다.

replace

replace 기능을 통해 이동한 페이지에서 뒤로가기를 한 경우 페이지가 이전 페이지에 남을지를 결정합니다.
기본 값은 false이며 이동한 페이지에서 뒤로가기시 현재 페이지가 나타납니다.
true로 할 경우 이동한 페이지에서 뒤로가기시 현재 페이지의 이전 페이지가 나타납니다.

import { useNavigate } from "react-router-dom"

function App() {
  const navigate = useNavigate()
  return (
    <div className="App">
      <button onClick={()=>navigate('/about')}>about</button>
    </div>
  );
}

export default App;

위 코드는 App에서 버튼을 누르면 url이 /about으로 바뀝니다.

import { useNavigate } from "react-router-dom"

function About() {
  const navigate = useNavigate()
  return (
    <div>
      <button onClick={()=>navigate('/detail',{replace:true})}>detail</button>
    </div>
  );
}

export default About;

위 코드는 /about페이지에서 detail버튼을 누르면 url이 /detail로 바뀝니다.

우리는 / -> /about -> /detail로 버튼을 통해 이동했습니다.
About컴포넌트의 useNavigate에서 {replace:true}를 사용하였기에 /detail 페이지에서 뒤로가기 버튼을 누른다면/about을 건너뛰고 / 로 url이 이동됩니다.

state

state는 이전 라우트에서 전달한 데이터를 다음 라우트에서 사용하고자 하는 경우 사용합니다.

import { useNavigate } from "react-router-dom"

function App() {
  const navigate = useNavigate()
  return (
    <div className="App">
      <button onClick={()=>navigate('/about',{state:{id:0,value:"value"}})}>about</button>
    </div>
  );
}

export default App;

state의 값으로는 어떤 값이든 올 수 있습니다. 위의 코드에선 {id:0,value:"value"}를 적었습니다.
이동한 페이지에서 전달된 데이터값을 받으려면 useLocation을 사용해 주면 됩니다.

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

function About() {
  const location = useLocation();
  return (
    <div>
        <div>id: {location.state.id}</div> // 0
        <div>value: {location.state.value}</div> // value
    </div>
  );
}

export default About;

마치며

useNavigate를 통해 history, replace, state를 동시에 수행 할 수 있습니다.

import { useNavigate } from "react-router-dom"

function About() {
  const navigate = useNavigate()
  return (
    <div>
      <button onClick={()=>navigate('/detail',{replace:true,state:{id:0,value:"value"}})}>detail</button>
    </div>
  );
}

export default About;

위 코드와 같이 동시에 여러가지 기능을 할 수 있습니다.

참고자료 출처

useNavigate -React Router
react 에서 navigate 사용하기 (useNavigate / Navigate) -Basemenks
[2022.07.13] 리액트 라우터 - useNavigate -reasonz
[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation() -카레유