useNavigate Hook Router - 2

Router - 1 포스트를 이어서 시작한다. 1에서 쓰던 코드를 그대로 사용할 것 이다.

https://mhypro.tistory.com/48

Router를 이용해 페이지를 나누어보자. Router - 1

 

먼저 navigate를 알아보자 

navigate의 뜻은 탐색이다 즉 URL을 탐색한다고 생각하면된다. 코드로 알아보자.

ex) navigate('/one') -> localhost:3000/one

먼저 useNavigate훅을 import를 해주자

App.js

let navigate = useNavigate()

App() 함수안에 이렇게 navigate를 선언해준다. 

이렇게 사용할 수 있다. button을 클릭하면 onClick안에있는 함수가 실행되며 navigate('/one')가 실행된다.

Link 컴포넌트랑 비교해봤다. 기능은 똑같다. Link의 단점은 a태그처럼 문자열의 디자인이 바뀐다. 뭐 css로 처리할 수 있긴하다.

 

useNavigate의 +기능

navigate(-1) -> 이전페이지로 돌아갈 수 있다. 

navigate(1) -> 앞페이지로 갈 수 있다.