[React Router] 유저의 상태에 따라 경로 보호하기

로그인하지않은 사용자에게 장바구니 페이지를 보여주지 않거나
관리자에게만 관리자 페이지를 보여주고 싶을 때
useNavigate를 많이 사용한다.
관련해서 <Navigate> 요소도 있어 함께 정리해보려고 한다.

1. useNavigate()

이벤트가 발생했을 때 경로를 변경할 수 있는 메서드이다.
첫번째 인자로는 경로를, 두번째 인자로는 {replace}를 받을 수 있다.

replace: 기본값은 false로 true로 설정하면 뒤로가기가 불가능해진다.

navigate = useNavigate();

const handleClick = () => {
	navigate('/', {replace: false});
}

2. <Navigate>

렌더링 시 경로 변경을 한다. useNavigate()를 감싸고 있기 때문에 to, replace 속성을 이용할 수 있다.

// protectedRoute.jsx

function ProtectedRoute({children}) {
	const {user} = useAuth();
  
  	if(!user) return <Navigate to="/" replace>
    
    return children;
}

사용자가 로그인상태가 아닐경우 위와같이 컴포넌트 상위에서 바로 홈페이지로 가도록 설정하고 뒤로가기도 함께 막아줄 수 있다.