React Router : Hooks : useNavigate

useNavigate

useNavigate 는 Link와 마찬가지로 페이지를 이동할 때 사용되는 훅이다.

link와 차이점으로 link는 클릭 시 단순히 페이지를 이동함에 비해 useNavigate는 특정 이벤트가 실행되거나 조건을 만족했을 때 이동시켜주도록 할 수 있다.

사용방법

1. useNavigate를 사용하기 위해 import 해준다.

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

2. useNavigate 변수를 선언한다.

const navigate = useNavigate();

아래의 두가지 방법으로 사용할 수 있다.

3-1. 경로를 설정하여 이동

<button onClick={()=>navigate('/home')}>이동</button>

3-2. +- n을 설정하여 페이지 이동

이동할 히스토리 스택을 지정할수 있다.
navigate(-1) 의 경우 뒤로가기, navigate(+1)의 경우 앞의 페이지로 이동한다.

<button onClick={()=>navigate(-1)}>뒤로가기</button>

예제

import { Route, Routes,useNavigate } from 'react-router-dom'
import Home from './components/Home'
import Intro from './components/Intro'
import Page1 from './components/Page1'
import Page2 from './components/Page2'
import Page3 from './components/Page3'


import './App.css'

function App() {

  const navi = useNavigate();

  return (
    <div>
      <button onClick={()=>navi('/home')}>Home</button>
      <button onClick={()=>navi('/page1')}>Page1</button>
      <button onClick={()=>navi('/page2')}>Page2</button>
      <button onClick={()=>navi('/page3')}>Page3</button>
      <button onClick={()=>navi(-1)}>뒤로가기</button>
      <button onClick={()=>navi(+1)}>앞으로? 가기</button>
      <Routes>
        <Route path='/' element={<Intro />}>
          <Route path='/home' element={<Home />} />
          <Route path='/page1' element={<Page1 />} />
          <Route path='/page2' element={<Page2 />} />
          <Route path='/page3' element={<Page3 />} />
        </Route>

      </Routes>
    </div>
  )
}

export default App