[React] useNavigate 이용하여 뒤로가기 버튼 구현하기

'뒤로가기' 버튼을 누르면 이전 페이지로 이동하는 기능을 구현해보자

useNavigate는 양식이 제출되거나 특정 event가 발생할 때,  url을 조작할 수 있는 interface를 제공한다
useNavigate는 react v6 에서 useHistory 가 변화한 것이다. 이 때 useHistory 에서 사용하던, window의 history 를 이용한 navigate 기능도 할 수 있게 되었다

react-router-dom 이 v6 로 업데이트 되기 이전에는 history.goBack() 을 이용하였지만 v6 로 업데이트됨에 따라 useNavigate 를 사용해야한다

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

const App = () => {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}> 뒤로가기 </button>
    </>
  );
}

위와 같은 방법으로 navigate 안에 숫자를 인자로 넘겨주면 된다

navigate(-1) 은 바로 이전 페이지(앞페이지)로 이동하는 것이고
navigate(-2) 은 전전페이지로 이동한다

 

 

 

 

 

참고자료 : https://basemenks.tistory.com/278