[React - 16] createBrowserRouter

본 내용은 공식문서를 번역하여 가져왔습니다.

https://reactrouter.com/en/main/routers/create-browser-router#routes

createBrowserRouter v6.15.0

모든 React Router 웹 프로젝트에 권장되는 라우터입니다. 

DOM History API를 사용하여 URL을 업데이트하고 이력 스택을 관리합니다.

 

또한 v6.4 데이터 API인 로더(loader), 액션(actions), 페처(fetcher) 등을 활성화합니다.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

---

타입 선언하기 예시

function createBrowserRouter(
  routes: RouteObject[],
  opts?: {
    basename?: string;
    future?: FutureConfig;
    hydrationData?: HydrationState;
    window?: Window;
  }
): RemixRouter;

---

routes는 children 속성에 중첩된 라우트 객체들의 배열입니다.

createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "events/:id",
        element: <Event />,
        loader: eventLoader,
      },
    ],
  },
]);

---

basename

루트 디렉토리가 아닌 하위 디렉토리에 배포해야 하는 상황에서 앱의 기본 경로(basename)입니다.

createBrowserRouter(routes, {
  basename: "/app",
});

루트로 링크를 설정할 때 마지막 슬래시도 포함합니다.

createBrowserRouter(routes, {
  basename: "/app",
});
<Link to="/" />; // results in <a href="/app" />

createBrowserRouter(routes, {
  basename: "/app/",
});
<Link to="/" />; // results in <a href="/app/" />

---

createBrowserRouter는

BrowserRouter / Routes / Route 보다 가독성 있고 편리하게 작성 가능하다는 점입니다.

React Router 공식문서에도 Router 관련하여 새로운 메서드들이 나오고 있으니 참고하고 사용 해보면 매우 유익합니다.