[REACT] HashRouter

HashRouter란?

React Router에서 제공하는 라우터 컴포넌트 중 하나로, URL의 해쉬값을 사용하여 페이지를 관리합니다. 브라우저에서 URL의 해쉬값이 변경되면 HashRouter는 해당 경로와 일치하는 컴포넌트를 렌더링합니다.

HashRouter는 BrowserRouter와 달리, 브라우저의 URL이 변경될 때마다 페이지를 새로 로딩하지 않고, history 객체를 이용하여 React 애플리케이션 내에서 라우팅을 처리합니다. 이를 통해 SPA에서의 페이지 전환 속도를 빠르게 만들어 줍니다.

HashRouter의 성능은?

HashRouter는 URL의 해쉬값을 이용하기 때문에, 브라우저가 페이지를 캐싱할 수 있어서 성능이 우수하다. 또한, 페이지가 새로고침되지 않고도 컴포넌트가 변경되므로, UX가 매우 빠르고 부드럽다.

그러나 HashRouter는 URL의 해쉬값을 사용하기 때문에, 검색엔진최적화(SEO)에는 매우 취약하다. 따라서 SEO를 중요시 하는 웹 앱에서는 HashRouter대신 BrowserRouter를 사용하는 것이 좋다.

BrowserRouter와 HashRouter의 차이점

BrowserRouter

• HTML5의 history API를 활용해서 UI를 업데이트합니다.
• 동적인 페이지에 적합합니다.
• 새로고침하면 경로를 찾지 못해 오류가 납니다.
• 이를 해결하기 위해서는 서버에 추가적인 세팅이 필요합니다. 페이지의 유무를 서버에 알려줘야 하며 서버 세팅시 검색엔진에 신경써야합니다.
• github 페이지에서 설정하기에 복잡합니다.

HashRouter

• URL의 Hash를 활용한 라우터
• 주소에 #가 붙습니다.
• 정적인 페이지에 적합합니다.
• 검색 엔진으로 읽지 못합니다. #값 때문에 서버가 읽지 못하고 서버가 페이지의 유무를 알지 못하기 때문입니다.
• 새로고침 해도 오류가 나지 않습니다.
• github 페이지에서 설정하기 간편합니다.