[React] BrowserRouter와 HashRouter의 차이(Browser Router를 사용할 때 새로고침 시 404 에러가 발생하는 이유)

React를 사용해 개발하면서 라우팅 기능을 구현할 때 대부분 react-router-dom을 사용할 것이다. react-router-dom에는 수많은 라우터 중에 HashRouter와 BrowserRouter가 존재한다. 둘 중에서 대부분 BrowserRouter를 사용하여 라우팅을 구현할 것이다. BrowserRouter와 HashRouter를 비교하는 글들이 많은데, 각각의 특징을 간단히 적자면 아래와 같다.

Hash Router

• 주소에 Hash(#)가 붙는다.
• Hash(#) 때문에 검색 엔진이 읽지 못한다. (SEO 최적화 X)
• 별도의 서버 설정을 안 해도 새로고침 시에 에러가 발생하지 않는다.

Browser Router

• History API를 사용한다.
• 별도의 서버 설정을 하지 않으면 URL에 직접 접근할 때나 새로고침 시에 경로를 찾지 못해서 404 에러가 발생한다.

 

Browser Router에서 404 에러가 발생하는 이유는 우리가 만든 앱이 SPA(Single Page Application)이기 때문이다. SPA의 경우, 도메인에 접근하면 클라이언트는 서버로부터 index.html, JS, CSS 파일 등을 전달받고 이를 실행시킨다. 최초 한 번의 페이지 로드만이 존재하고 이후부터는 History API에 의해 렌더링된다.

 

따라서 루트 path에서의 새로고침은 정상적으로 작동하지만, 다른 path에서의 새로고침은 불가능하다. 다른 path에서 새로고침을 하게 되면 브라우저는 도메인 주소를 보고 서버를 찾아간 후에 path를 보고 path명과 같은 디렉토리를 찾는다. 그러나 우리가 만든 앱은 SSR(Server Side Rendering)이 아니기 때문에 path명과 같은 폴더를 가지지 않으며, 그 안에 index.html이 존재하지도 않는다. 결국에 브라우저는 서버로부터 필요한 파일을 찾지 못했기 때문에 404 에러가 발생한다고 한다.

 

 

나는 이 에러를 파이어베이스를 사용하여 배포했을 때 처음 겪었다. 이때 해결방법으로 firebase.json 파일에 rewrites 설정 코드를 추가하여 해결했는데, 새로고침 시에도 index.html을 찾을 수 있도록 rewrites 설정을 해주는 것으로 이해했다..!