Picking a Router

앱은 (보통) 하나의 라우터만 사용하지만, 앱이 실행되는 환경에 따라 여러 라우터를 사용할 수 있습니다. 이 문서는 어떤 라우터를 사용할지 결정하는 데 도움이 될 것입니다.

v6.4 의 Data APIs 를 사용하기

v6.4 에서는 새로운 Data APIs 를 지원하는 새로운 라우터가 도입되었습니다:

스크린샷 2023-07-19 오전 2.09.08.png

아래 4가지를 사용해야 Data APIs 사용 가능

[createBrowserRouter](<https://reactrouter.com/en/main/routers/create-browser-router>)
[createMemoryRouter](<https://reactrouter.com/en/main/routers/create-memory-router>)
[createHashRouter](<https://reactrouter.com/en/main/routers/create-hash-router>)
[createStaticRouter](<https://reactrouter.com/en/main/routers/create-static-router>)

아래 5가지는 Data APIs 를 사용할 수 없다.

[<BrowserRouter>](<https://reactrouter.com/en/main/router-components/browser-router>)
[<MemoryRouter>](<https://reactrouter.com/en/main/router-components/memory-router>)
[<HashRouter>](<https://reactrouter.com/en/main/router-components/hash-router>)
[<NativeRouter>](<https://reactrouter.com/en/main/router-components/native-router>)
[<StaticRouter>](<https://reactrouter.com/en/main/router-components/static-router>)

6.4 의 새로운 라우터 중 하나를 사용하도록 앱을 업데이트하는 것이 좋다. Data APIs 는 현재 React Native 에서 지원되지 않지만, 곧 지원될 예정이다.

v6.4 로 빠르게 업데이트하는 가장 손쉬운 방법은 <Route> 엘리먼트를 라우트 객체로 변환할 필요가 없도록 createRoutesFromElements 의 도움을 받는 것입니다.

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="dashboard" element={<Dashboard />} />
      {/* ... etc. */}
    </Route>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Web Projects

모든 웹 프로젝트에서 createBrowserRouter 를 사용하는 것이 좋습니다.

history.pushState 가 표준화되기 전, 웹 앱에서 흔히 사용되던 hash urls(#this/stuff) 대신 full URL 을 사용합니다. full URL 은 SEO 에 더 좋고, 서버 렌더링에 더 좋으며, 나머지 웹 플랫폼과 더 호환됩니다.

정적 파일 서버에서 앱을 호스팅하는 경우 404를 받지 않으려면 모든 요청을 index.html 로 보내도록 구성해야 합니다.

어떤 이유로 full URL 을 사용할 수 없는 경우, createHashRouter 가 차선책입니다.

Data APIs 에 관심이 없다면, <BrowserRouter> 를 계속 사용하거나, full URL 을 사용할 수 없는 경우, <HashRouter> 를 사용할 수 있습니다.

v6.4 의 Data APIs 를 사용하기

Web Projects

Testing