파피루스

[React] useRouter 내장 함수 (push, replace, back, reload) 본문

React

[React] useRouter 내장 함수 (push, replace, back, reload)

떼굴펜 2024. 9. 11. 14:12

 페이지 방문 순서를 history stack에 저장한다. 

 

내장 함수

push : 새로운 URL 추가

replace : 현재 URL을 새로운 URL로 교체

back : 뒤로가기 

reload : 새로고침 (히스토리 스택에 영향 없음)

 

router.replace의 사용 예시

 로그인 페이지에서 사용자가 정상적으로 로그인을 완료했을 때, router.push 가 아니라 router.replace를 쓰곤한다.

뒤로 가기 버튼으로 다시 로그인 페이지에 다시 접근하는 것을 막기 위함이다.

 

history stack 의 데이터에 접근하는 방법은?

 없다. stack 자체를 조회할 수 없기에 각각의 페이지 이동 시 push가 맞는지 replace가 맞는지 적절히 잘 쓰는 것이 좋다.

로그인 페이지가 n개의 단계로 페이지 이동하면서 진행되어 데이터를 모두 조회해서 삭제하고 싶다? -> 이런 것이 불가능하다