회원가입 완료 버튼을 누르면 회원가입화면에 머물러 있는 것이 아니라, 로그인 페이지로 넘어가도록 설계한다면 useNavigate를 모르면 안될것이다.

useNavigate 이라는 Hook을 이용하면 간편하게 특정 경로로 이동시키고 특정 경로로 리다이렉트가 가능하도록 도와준다.

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

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 다른 경로로 이동하기 : navigate('/other-page');
	// 과거 경로로 이동하기 : navigate(-2);
    // 또는 리다이렉트하기 :  navigate('https://example.com');
  };

}

navigate에 링크, 숫자, 경로를 붙여줌으로써 간편하게 경로를 컨트롤 할 수 있으며, 보통 버튼을 클릭하게되면 특정 페이지로 이동시켜주는 용도로 많이 사용한다.

정리

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(숫자 or 경로 or 링크...);

요것만 알면 끝