[React Router v6] createBrowserRouter 레이아웃 여러개

createBrowserRouter

-> v6.4 부터 사용할 수 있다.

 

https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis

Picking a Router v6.10.0

    "react-router-dom": "^6.10.0",

프로젝트에서 사용하는 버전

 

프로젝트 최상단 파일

index.tsx

OR

main.tsx

import { RouterProvider } from 'react-router-dom';
import routes from './routes';

const router = createBrowserRouter(routes);

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

<BrowserRoute>로 감싸지 않고 최상단 파일에서 <RouterProvider> 를 사용한다.

RouterRrovider에는 router={} props를 필수로 넣어야 한다.

routes.ts

const routes = [
  {
    element: <Layout />,
    errorElement: <NotFound />,
    children: [
      { path: '/', element: <MainPage /> },
      { path: '/data', element: <DataPage /> },
      { path: '/platform', element: <PlatformIntroPage /> },
    ],
  },
];

export default routes;

기본적으로 이렇게 사용할 수 있다.

 

이렇게 routes 파일을 따로 빼준 이유는 routes.test.ts  파일에서 테스트 코드를 작성할때 활용해야하기 때문

 

 

 

createBrowserRouter 으로 레이아웃 여러개 사용하기

페이지별로 레이아웃이 달랐으면해서 이렇게 분리했다.

const routes = [
  {
    path: '/',
    element: <Layout />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <MainPage /> },
      { path: '/data', element: <DataPage /> },
      { path: '/platform', element: <PlatformIntroPage /> },
    ],
  },
  {
    path: '/login',
    element: <NoLayout />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <LoginPage /> },
    ],
  },
];

export default routes;

 

간단히 하는 법

const routes = [
  {
    path: '/',
    element: <Layout />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <MainPage /> },
      { path: '/data', element: <DataPage /> },
      { path: '/platform', element: <PlatformIntroPage /> },
    ],
  },
  {
    path: '/login',
    element: <LoginPage />,
  },
];

export default routes;

---

참고 블로그

https://velog.io/@jgy4419/react-router-dom%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%97%AC%EB%9F%AC-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9C%BC%EB%A1%9C-%EB%82%98%EB%88%84%EB%8A%94-%EB%B0%A9%EB%B2%95

 

https://www.crocus.co.kr/1814