[TypeScript]BrowserRouter, HashRouter 차이(Vite)

1. BrowserRouter와 HashRouter의 차이

• BrowserRouter :
  1. HTML5의 history API를 사용합니다.
  2. URL이 깔끔합니다. (예: http://localhost:5173/about)
  3. Vite 서버 설정이 필요하여, 모든 경로에 대해 index.html을 제공하도록 서버를 구성해야 합니다. 그렇지 않으면 404 오류가 발생할 수 있습니다.

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Router basename={process.env.PUBLIC_URL || ''}>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </Router>
  </StrictMode>
);

• HashRouter :
  1. URL의 해시(#)를 사용합니다 (예: http://localhost:5173/#/about).
  2. 서버 설정이 필요 없고, 해시 뒤의 경로는 서버로 전송되지 않기 때문에, 정적 호스팅 환경에서도 동작합니다.

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={<App />} />
        </Routes>
        </HashRouter>
      </StrictMode>
    );