React - HashRouter, BrowserRouter의 차이

 

React routet 설치법

npm install react-router-dom
yarn add react-router-dom

 

HashRouter

• 주소에 해쉬태그가 붙는다(#) -> index.html에서 index.html# 처럼 뒤에 붙는다.
• BrowserRouter와는 다르게 새로고침하여도 에러가 발생하지 않는다.
• 검색 엔진이 찾지를 못한다.
• 주로 정적인 페이지에서 사용된다.

<HashRouter>
  <Route path="/" />
</HashRouter>

// HashRouter로 감싸주어 사용한다.

 

BrowserRouter

• <Link> 태그를 통해 to 속성에 이동할 경로를 추가하여 이동시킨다
• 새로고침하면 경로를 찾지 못해 에러가 발생한다.
• HTML5 History API를 사용한다.
• 주로 동적인 페이지에서 사용된다.

<BrowserRouter>
  <Link to="/">메인 페이지</Link>
</BrowserRouter>

// BrowserRouter 감싸주어 사용한다.

 

두 라우트의 주요한 차이

BrowserRouter의 경우에는 새로고침 시, 해당 URL을 바탕으로 페이지를 새로이 불러온다. 하지만 BrowserRouter는 Link태그를 사용하여 URL을 이동하며 페이지를 불러오는 것이 아닌 단순히 주소만 바꿔주며 컴포넌트들을 렌더링하는 역할을 한다. 그렇기에 새로고침을 하게 되면 해당 페이지를 찾지 못하기 때문에 에러가 발생한다.

HashRouter의 경우에는 새로고침 시, #(해쉬태그) 이전의 URL만 서버를 통해 불러오게 된다. 가장 맨 처음 페이지만 불러오기에 BrowserRouter와는 달리 에러가 발생하지 않게된다.