react-router-dom 라우트 정의하기

프로젝트 리팩토링을 진행하면서 보니 react-router-dom v6.4 이상에서 권장하는 방법이 아닌 다른 방법으로 router를 관리하고 있었다. 이번에 리팩토링 하면서 새로 알게 된 방법을 정리해보려 한다.

createBrowserRouter

• 모든 React Router 웹 프로젝트에 권장되는 방법이다.
• 인자로 routing될 경로와 컴포넌트를 요소로 가지는 객체를 전달한다.
• 경로가 여러개인 경우에는 배열로 인자를 전달한다.

routerProvider

• createBrowserRouter로 생성한 객체를 routerProvider컴포넌트에 router 속성으로 넣어 랜더링한다.

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

const router = createBrowserRouter([
  { path: "/", element: <HomePage /> },
  { path: "/products", element: <ProductsPage /> }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

createRoutesFromElements

• 객체가 아닌 JSX 코드로 라우팅을 설정할 수 있다.
• createRoutesFromElements로 JSX코드를 만들어 인자로 전달한다.
  • 이때 Router를 import해서 태그로 사용한다.
  • createRoutesFromElements로 만든 변수를 createBrowserRouter의 인자에 전달한다.
  • 최종적으로 RouterProvider에 router속성으로 만든 router를 전달하면 된다.

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

const routeDefinitions = createRoutesFromElements(
  <Route>
    <Route path="/" element={<HomePage />} />
    <Route path="/products" element={<ProductsPage />} />
  </Route>
);

const router = createBrowserRouter(routeDefinitions);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

createBrowserRouter와 createRoutesFromElements중 편한 방법으로 사용하면 된다.

---

출처)
udemy - React 완벽 가이드
React Router 공식문서

---