210406_TIL / React Router History

김승훈·2021년 4월 16일
0

flow-clone_TIL

목록 보기
11/12

React Router History : push와 replace or Browser History

Push

Home > Item > Login > Item 순으로 history에 쌓여서, 마지막 페이지에서 뒤로가기 버튼을 누르면 Item 페이지로 되돌아간다.

Replace

Home > Item > Item 순으로 history에 쌓여서, 마지막 페이지에서 뒤로가기 버튼을 누르면 Item 페이지로 되돌아간다.

history를 스택이라고 생각했을 때, push는 history 제일 위에 쌓는 것이고, replace는 history 제일 위에 있는 원소를 지금 넣을 원소로 바꾸는 것이다.

자바스크립트의 세션 히스토리 관리

  • 브라우저 기록 - DOM 고유의 구현으로 html 기록 API를 지원하는 브라우저에서 유용
  • 해쉬 히스토리 - 레거시 웹 브라우저를 위함 DOM 특정 구현
  • 메모리 히스토리 - 메모니 내역 구현. 테스트 네이티브와 같은 비 DOM환경에서 유용

히스토리 오브젝트는 일반적으로 다음과 같은 특징과 메소드를 가진다.

▶ length - (number) 히스토리 스택의 항목 수

▶ action - (string) 현재 액션 (PUSH, REPLACE 또는 POP)

▶ location - (object) 현재 위치. 다음 속성을 가질 수 있습니다.

· pathname - (문자열) URL 경로

· search - (string) URL 쿼리 문자열

hash - (string) URL 해시 조각

state - (string) 예를 들어, 제공된 특정 위치 상태. 이 위치가 스택에 푸시되었을 때 (경로, 상태)를 누릅니다. 브라우저 및 메모리 기록에서만 사용할 수 있습니다.

push - 새 항목을 기록 스택에 푸시

replace - 히스토리 스택의 현재 항목을 바꾼다.

go- 포인터를 n개 항목 만큼 이동

goBack

goForword

block

0개의 댓글