[React] 리액트 페이지 이동 Route, useNavigate(), Link to

Route로 페이지 이동

라우터 설치

npm install react-router-dom

 

 

 

index.js에서 <App />을

<BrowserRouter> </BrowserRouter>

로 감싸줍니다.

 

 

<Routes>
  <Route path="/" element={ } />
</Routes>

path에는 경로를

element에는 해당 경로에 띄울 요소를 넣어주면 됩니다.

 

App.js

 

 

 

 

---

 

 

 

 

useNavigate로 페이지 이동

let navigate = useNavigate();

 

navigate('/경로');

 

 

 

useNavigate()를 변수로 지정해주고

navigate('/');

경로를 넣은 함수를 호출해주기만 하면 됩니다!

 

 

해당 Nav 태그를 클릭하면

/detail 페이지로 이동합니다.

 

 

navigate(-1) : 전페이지로

navigate(-2) : 전전페이지로

 

 

 

 

 

---

 

 

 

Link to로 페이지 이동

<Link to={'/경로'}></Link>

 

Link to는 a태그랑 나타나는 모습이 같음