[React] react-router-dom v6 navigate (history)

이경은·2022년 1월 17일
0
post-custom-banner

useNavigate

react-router-dom v5에서는 useHistory를 사용해서 페이지 이동.
v6에서는 useHistory 대신 useNavigate를 사용해서 페이지 이동.

// v5
const history = useHistory();

history.push('/home');
history.replace('/home');

// v6
const navigate = useNavigate();

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

// v6 에서의 앞으로, 뒤로 가기 사용방법 변화 
<button onClick={() => navigate(-2)}>Go 2 pages back</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>Go forward</button>
<button onClick={() => navigate(2)}>Go 2 pages forward</button>
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const goHome = () => {
        navigate('/');
};

참조
참조

profile
Web Developer
post-custom-banner

0개의 댓글