React Router - BrowserRouter vs HashRouter

일단, 리액트 라우터를 알기 전에 리액트가 SPA를 쉽게 만들수 있도록 하는 라이브러리라는 점에 주목해야한다.

SPA의 경우 브라우저상으로 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용이 불가하다.

 

그 이유는 기존방식은 url 변경시 새로고침되며 모든 페이지를 reload하여 로드 시간이 오래 걸렸지만,

React는 SPA 체제로 새로고침 대신 Router를 사용하여 변경된 소스만 바뀌도록 하기 때문에 속도를 개선한다. 

 

하지만  페이지에 따라 주소를 각각 만들기 위한 Routing이 필요하고 리액트에서는 다양한 라이브러리를 통해 이러한 기능을 제공한다.

 

그러한 라이브러리 중 대표적으로 React Router가 있다.

 

React Router는 여러 화면으로 구성된 웹 애플리케이션을 만들 때 클라이언트 사이드의 라우팅을 간단하게 작업할 수 있도록 도와준다.

 

설치방법은 관리하는 패키지 매니저에 따라 아래와 같이 설치할 수 있다.

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

이러한 React Router에는 대표적으로 BrowserRouter와 HashRouter가 있다.

 

BrowserRouter는
HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 <Router>이다.

 

BrowserRouter는 리액트 라우터 돔을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 래퍼 컴포넌트이기 때문에, 여기서는 App 컴포넌트를 감싸주면 된다.

//index.tsx in CRA or main.tsx in vite

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  </React.StrictMode>
);

또한 Routes와 Route를 통해 url에 따라 렌더링을 다르게 할 수 있다.

// App.tsx

import { Routes, Route, Navigate } from 'react-router-dom';

import Home from 'pages/Home';
import MyPage from 'pages/MyPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/mypage" element={<MyPage />} />
      <Route path="*" element={<Navigate to="/" replace={true} />} />
    </Routes>
  );
}

export default App;

이 때, path="*"는 존재하지 않는 경로로 들어올 때(ex: /auth등) 리다이렉트할 수 있게끔 작성하였다. (replace = true는 뒤로갈 수 있게끔 설정했다.)

 

이 때, HashRouter 역시  BrowserRouter를 사용할 때와 작성되는 사용성이 비슷하다.

//index.tsx in CRA or main.tsx in vite

import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
        <App />
    </HashRouter>
  </React.StrictMode>
);

그리고 페이지를 로드할 때마다 /#/이 붙는다. (ex, /#/mypage)

 

둘의 차이점을 찾아 정리해보면 아래와 같다.

 

BrowserRouter	HashRouter
HTML5의 history API를 활용해서 UI 업데이트	URL의 Hash를 활용한 라우터
동적인 페이지에 적합 (서버에 있는 데이터들을 스크립트에 의해 가공 처리한 후 생성되어 전달되는 웹페이지)	정적인 페이지에 적합 (미리 저장된 페이지가 그대로 보여지는 웹페이지)
	#에 의해 검색 엔진으로 읽지 못한다.
	서버에 요청이 가지 않으므로 서버가 주소의 이동을 모르게 됨
새로고침하여 경로를 못찾으면 에러 발생	www.domain.com에 대한 요청만 서버에 들어가게 되어 주소 이동 후, 새로고침해도 에러 발생 X

 

 

참고 : https://velog.io/@wiostz98kr/TIL49-l-React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0React-Router-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-Feat.-SPA

 

https://worker-k.tistory.com/entry/React-BrowserRouter%EC%99%80-HashRouter%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%A0%95%EB%A6%AC