프론트엔드
React Router의 useNavigate 훅을 사용하여 페이지 이동 기능을 구현
쩨이1
2024. 5. 29. 10:22
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 내에서 페이지 간 이동을 간편하게 처리할 수 있습니다.