[React] useNavigate로 뒤로가기 기능 구현하기

useNavigate

useNavigate의 기본 인자는 다음과 같다.

navigate("/success",  { replace: true });

첫번째 인자로는 주소를 받고, 두번째 인자로 {replace, state} 인자를 받는다.

• replace가 true 일 경우, navigate에 지정된 주소로 넘어간 뒤 뒤로가기가 불가능하다. 이 때 자신의 메인 페이지 '/' 로 돌아가게 된다.
• replace의 기본값은 false이다.

---

리액트에서 Link와 useNavigate를 이용해 페이지 이동을 구현할 수 있는데,
트위터를 SPA로 만들어보는 실습에서 Link 를 이용해서 페이지 이동을 시켜 보았지만 뒤로가기 기능은 useNavigate 를 이용해서 구현시켜 보았다.

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

보통 이런식으로 useNavigate 를 navigate 라는 변수에 할당시켜 사용한다.

const navigate = useNavigate();

이제 <MyBackButton> 이라는 컴포넌트를 만들어 경로를 지정해 주었다.

const MyBackButton = () => {
  const navigate = useNavigate(); //변수 할당시켜서 사용
  const onClickBtn = () => {
    navigate(-1); // 바로 이전 페이지로 이동, '/main' 등 직접 지정도 당연히 가능
  };
  return (
    <button onClick={onClickBtn}></button>
  );
};

처음에는 navigate('../') 이런식으로 경로를 지정해주곤 했는데, 바로 이전 페이지로 이동할 수 있도록 -1 인덱스 형태로 넣어주니 내가 이전에 클릭한 페이지로 돌아가는 뒤로가기 기능이 제대로 구현됐다.