React Router의 useNavigate 훅을 사용하여 페이지 이동 기능을 구현

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

const MyComponent = () => { //useNavigate를 사용하여 navigate 함수를 가져옵니다.

  const navigate = useNavigate();

  const handleClick = () => { // 버튼이 클릭되면 handleClick 함수가 호출됩니다.

    // '/new-page'로 이동

    navigate('/new-page');

  };

  return (  //handleClick 함수 내에서 navigate 함수를 사용하여 '/new-page'로 페이지를 이동합니다.

    <button onClick={handleClick}>이동하기</button>

  );

};

 

이 코드를 실행하면 해당 버튼을 클릭했을 때 '/new-page'로 페이지가 이동됩니다. 이렇게 React Router의 useNavigate를 사용하면 SPA 내에서 페이지 간 이동을 간편하게 처리할 수 있습니다.