react useNavigate

useNavigate 페이지를 이동할 때 사용, API 응답 후 등 특정 이벤트에 따라 사용자를 다른 경로로 이동
특히 SPA (Single Page Application)에서 경로 전환 관리할 때 유용하다

npm install react-router-dom

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

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

• navigate 변수에 이동시킬 페이지 주소를 넣거나 -1 값을 넣어 페이지 히스토리 뒤로가기 버튼 동작 가능

navigate(-1); // 뒤로 가기
navigate(1);  // 앞으로 가기

• 상태 전달 : 내비게이션 시 추가 상태를 전달할 수 있음. useLocation 훅으로 접근

navigate('/about', { state: { from: 'home' } });

import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();
  const { from } = location.state || {};
  
  return (
    <div>
      <h1>About Page</h1>
      {from && <p>Navigated from: {from}</p>}
    </div>
  );
}

export default About;

• 대체 옵션 (replace) : 히스토리 스택에 새로운 항목을 추가하지 않고 현재 항목을 대체할 수 있음. 이를 통해 뒤로가기 시 원래 페이지로 돌아가지 않게 할 수 있다. 

navigate('/about', { replace: true });

 

useNavigate v6.24.0 | React Router