[TIL] useNavigate , replace : 브라우저 히스토리 제거

* 문제 상황

: 몇몇 페이지에 "프로텍티드 라우터"를 적용하여 로그인을 안 한 유저는 url로 접근이 불가능하도록 막았다.

: 즉, 순서가 

Ex. 커뮤니티 글 작성 페이지 -> 로그인이 안되어 있으므로 로그인 페이지로 이동 

이 되는 건데,

맞딱뜨린 로그인 페이지에서 "뒤로 가기"를 눌러도 "커뮤니티 글 작성 페이지"로 돌아가기 때문에 생각한 뒤로 가지 않아지는 상황이 발생한다

 

* 해결방법

: useNavigate 의 replace

return sub ? <Outlet/> : <Navigate to={"/login"} replace={true}/>

: 프로텍티드 라우터에 replace를 넣었다

: 즉, sub(로그인유무판단변수)가 true이면, 사용자가 입장하려고 하는 <Outlet />으로 보내주면 되고, 아닐시 {"/login"} 으로 보내주면 된다. 

: 이 때, login 페이지에 replace={true} 를 주면, 이렇게 연결되는 부분은 브라우저의 히스토리에 기록이 되지 않는다. 

: 그래서 로그인페이지에서 뒤로 가기를 누르면? 사용자가 생각하는 전의 페이지로 넘어갈 수 있게 된다