[React] useNavigate() : 페이지 이동 도와주는 훅(함수)

🎤 페이지 이동 도와주는 useNavigate()

→ Link 태그 말고 useNavigate() 함수 사용하자~

1. App.js에 import 해오기

import { Routes, Route, Link, **useNavigate**, Outlet } from 'react-router-dom';

2. 변수에 저장

let navigate = **useNavigate();**

페이지 이동하는 Link 태그를 사용하면 그냥 a태그로 오는거라서 안예쁨

→ 그래서 react-bootstrap에서 가져온걸로 useNavigate를 줘보자

페이지 이동 도와주는 useNavigate()

#Link 태그 말고
<Link to="/">Home</Link>
<Link to="/detail">Detail</Link>

#useNavigate 사용
<Nav.Link onClick={()=>**{ navigate('/')}**}>Home</Nav.Link>
<Nav.Link onClick={()=>**{ navigate('/detail') }**}>Detail</Nav.Link>

이전페이지(뒤로가기), 다음페이지(앞으로가기) 이동

<Nav.Link onClick={()=>{ navigate('-1')}}>뒤로 가기</Nav.Link>
<Nav.Link onClick={()=>{ navigate('1')}}>앞으로 가기</Nav.Link>