TL; DR
BrowserRouter
A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.
HTML5 history API를 사용하여 UI(화면)를 URL과 통기화 상태로 유지하는 Router이다.
(pushState, replaceState 및 popstate event)
HashRouter
A that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.
URL의 hash부분(예를 들면 window.location.hash)을 사용하여 UI(화면)를 URL과 동기화 상태로 유지하는 Router이다.
여기서 중요한 것은 hash history는 location.key 혹은 location.state을 지원하지 않는다는 점이다.
그래서 react-router공식문서에서는 <BrowserStory>를 사용하는 것을 권장한다.
Conclusion
Router란 client의 path(요청 경로)를 보고 이 요청을 처리할 수 있는 곳을 말하며
HashRouter보다는 모던한 방식은 BrowserRouter를 사용하는 것을 추천한다.
Router란?
Router란 client의 path(요청 경로)를 보고 이 요청을 처리할 수 있는 곳을 말한다.
BrowserRouter
js를 사용하여 URL을 변경하는 것은 옛날부터 가능하였다.
document.location.href = 'https://developer.mozilla.org/'; 위와 같은 조작을 하면 당연히 페이지는 reload된다. 그래서 위와 같은 방법은 SPA에 적합하지 않은 방법이다.
(window.location.hash를 사용하면 reload없이 변경 조작할 수 있지만 해쉬값만을 변경할 뿐이므로 적절한 방법이 아니다.)
하지만 History API를 사용하면 reload없이 변경할 수 있다.
window.history.pushState({}, null, 'https://developer.mozilla.org/') 하지만 위와 같은 방식도 명확한 한계를 갖고있다.
제공하는 URL이 반드시 현재페이지와 출처(origin)가 같아야 한다는 점이다.
Advantages of HashRouter
가장 큰 장점으로는 사용자가 일반적인(hash가 없는) URL을 볼 수 있는 것이다.
그리고 SEO측면에서도 유리할 것이다.
Disadvantages of HashRouter
많은 장점들을 가지고 있는 BrowserRouter지만 이를 위해서는 추가 구성이 필요하며 비용도 발생한다. (server를 구축하여 항상 request에 대한 respone을 해줘야 한다)
HashRouter
#는 굉장히 오랜시간동안 URL의 일부분으로 사용되어 왔다.
(ex. https://developer.mozilla.org/en-US/docs/Web/API/URL#properties)
<h2 id="properties">
<a href="#properties" title="Permalink to Properties">Properties</a>
</h2>위 URL은 브라우저가 DOM tree에서 id="properties"를 찾게 만들어 준다.
그리고 브라우저가 위 요소를 찾을 수 있기 때문에 해당 위치까지 스크롤을 한다.
그리고 URL의 hash(#)는 또다른 특징이 있는데 inspector로 확인해보면
브라우저가 server로 #properties를 보내지 않은 것을 확인할 수 있다.
이는 브라우저에 의해 해석되고 js를 통해 접근할 수 있다.
console.log(window.location.hash);
// #properties위와 같은 특징은 SPA를 만들 때 장점이 될 수 있다.
하나의 HTML에 js를 사용하여 URL에 때른 페이지를 만들어 내기 때문이다.
위와 같은 특징은 create react app으로 생성된 앱에서 쉽게 찾아볼 수 있다.
server가 <div id="root"></div> 및 js파일에 응답하는 것을 볼 수 있다.
따라서 server가 사용자가 접속하고자 하는 정확한 경로에 대한 정보를 받지 못하는 경우에 굉장히 유용할 수 있다.
Advantages of HashRouter
가장 큰 장점은 브라우저가 route에 대한 정보를 서버에 보내지 않는 것이다.
덕분에 configuration이 매우 간단하다.
Disadvantages of HashRouter
단점으로는 익숙하지 못한 URL을 사용자가 경험해야 된다는 것이다.
(URL에 hash(#)가 들어가 있기 때문에)
그리고 SEO측면에도 좋지 못하다.
관련기사
Conclusion
그래서 결론이 뭔데? 먼저 결론부터 말하면 가능하면 BrowserRouter를 사용하자.
하지만 가벼운 SPA를 만들고 정적인 페이지가 목적이라면 HashRouter로도 충분하다.
목적에 맞는 Router를 선택하여 사용하도록 하자.
reference
React router documentation
Comparing the HashRouter and the BrowserRouter in React applications
[React Router] react-router-dom의 HashRouter와BrowserRouter의 차이
