useNavigate로 홈 버튼 구현하기

📋 useNavigate

useNavigate는 특정 행동을 했을 때 지정한 주소로 이동할 수 있는 기능을 제공한다.

사용법

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

const naviagte = useNavigate();

const handleHomeBtn = () => {
  navigate("/")
};

위 코드 처럼 useNaviagte를 사용하기 위한 변수를 선언해주고 해당 변수를 사용해 이동할 경로를 지정해주면 된다.

인자

첫 번째 인자로는 사용자가 이동할 주소, 두 번째 인자로는 {replace, state}를 받는다.

replace

true로 지정한다면 navigate에 지정한 주소로 이동하면 뒤로가기를 사용할 수 없다.
false가 기본값으로 뒤로가기를 사용할 수 있다.

state

Link와 같은 구조로 props를 전달할 수 있다.

전달한 props는 useLocation으로 접근해 사용하면 된다.

참고

useNaviagte 공식문서