[ReactJs] 브라우저 히스토리 vs 해시 히스토리

브라우저 히스토리 vs 해시 히스토리

1. 해시 히스토리

- #기호를 사용하여 페이지를 다시 불러오지않고 탐색한다.

- router/#/posts/http2

- 대부분의 단일 페이지 애플리케이션이 해시를 사용하여 페이지를 완전히 새로고침 하지 않고 앱의 변경을 반영한다.

- 구형 브라우저 구현이 필요하다면 추천한다.

1) 사용법

//해시 히스토리 정의 const ReactRouter = require('react-router') const History = require('history') let hasHistory = ReactRouter.useRouterHistory(History.createHashHistory)({ queryKey:false }) <Router history={hashHistory}/> //React Router 에 포함된 해시 히스토리 에서 사용 const {hashHistory} = require('react-router') <Router history={hasHistory}/>

-  history를 초기화할 때 queryKey 를 false 로 설정하여 성가신 쿼리 스트링(?_k=vl8reh)방지한다

- queryKey 는 오래된 브라우저를 지원하고 탐색할 때 상태를 전달하기 위해 설정된 기본값이다.

2. 브라우저 히스토리

- 해시 히스토리는 url에 #값이 표시된다. 브라우저 히스토리는 이를 방지한다

- router/posts/http2

- 서버측의 설정이 필요하다.

- 브라우저 히스토리는 해시를 사용하지 않는 실제 url 를 사용하기 때문에 각각의 요청이 서버로 전송된다.  그렇기에 어떤 url 이든 같은 파일로 응답하도록 한다.

1) 사용법

const {browserHistory} = require('react-router') <Router history={browserHistory}/>