[React] useNavigate를 활용한 페이지 이동하기

이번 글은 페이지를 이동시키는 함수를 반환해주는 useNavigate()의 사용법에 대한 글이다.

 

이 블로그 포스팅과 연결되는 내용이다.

https://hwangseoyoung.tistory.com/214

[React] 라우트(Route) - 페이지를 이동시키는 기능

---

 

 

[ useNavigate ]

useNavigate()는 페이지를 이동시키는 함수를 반환해주는 기능을 한다.

페이지를 이벤트 핸들러 함수 안에서 특정 조건에 따라 페이지를 이동시켜야할 때 사용한다.

 

아래 코드를 먼저 임포트 해준다.

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

 

아래 코드와 같이 컴포넌트 내부에 useNavigate() 호출 시 반환되는 네비게이팅 함수를 nav라는 변수를 생성해 저장해준다.

const nav = useNavigate();

 

만약 버튼을 클릭할 때마다 특정 주소로 이동하길 원한다면 아래 코드와 같이 onClick() 실행 시 nav()를 호출하고 인수로 이동하고자 하는 경로를 넣어준다.

const onClickButton = () => {
	nav('/new');
};

 

* 만약 한 페이지 뒤로 가고 싶게 만든다면 아래 코드와 같이 작성해주면 된다.

const onClickButton = () => {
	nav(-1);
};

 

---