[React] react-router-dom@v6의 createBrowserRouter와 RouterProvider

진행중인 프로젝트에 react router v6.4를 사용하면서 createBrowserRouter와 <RouterProvider />에 대해 정리해보았다.

 

createBrowserRouter()와 <RouterProvider />

간단히 설명하면, createBrowserRouter에서 경로를 모두 지정하여 RouterProvider의 router에 전달하는 방식이다.

 

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

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

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

 

PK같은 id값을 사용해 동적요소를 url로 지정하고자 할 때에는 ‘:’을 사용하여 path="/teams/:teamId” 와 같이 경로를 지정한다. 'teamId'와 같은 동적요소를 포함할 때, loader 속성을 활용해 동적인 데이터 로딩을 처리하는 비동기작업을 수행한다.

createBrowserRouter()

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

 

createBrowserRouter()의 정의를 보면 기본적으로 Route객체의 배열을 받도록 정의되어있다. 따라서 라우팅할 경로를 모두 createBrowserRouter()내에 전달하면 된다. 중첩되어있는 경로는 Route객체 내의 children속성을 이용해서 적용할 수 있다.

 

이전 버전에서는 최상위에서 <BrowserRouter>로 감싸고 Route컴포넌트를 작성했다고 한다..

 

<Outlet />

이렇게 중첩 라우팅을 구성한 후, Outlet을 통해 중첩된 라우트를 렌더링한다.

 

import { Outlet } from 'react-router-dom';

function Root() {
  return (
    <div>
      <h1>Parent Route</h1>
      <Outlet /> {/* 하위 라우트가 여기에 렌더링됨 */}
    </div>
  );
}

 

부모 라우트 컴포넌트 내에서 <Outlet />을 사용하면 부모 라우트의 레이아웃을 보존하면서 자식요소들의 컴포넌트가 렌더링될 수 있다.

 

 

위의 코드들은 router공식문서를 참고했다.

https://reactrouter.com/en/6.16.0/routers/create-browser-router

createBrowserRouter v6.16.0