React Router v6에서 다양한 레이아웃을 렌더링하는 방법은 무엇입니까?

React Router v6을 사용하여 다양한 레이아웃/요소로 구성 요소 렌더링

React Router v6에서는 다양한 레이아웃이나 요소로 구성 요소를 렌더링할 수 있습니다. 중첩된 경로 또는 useRoutes와 함께 경로 구성 사용 후크.

중첩 경로

및 <사이드바> 로그인 경로를 제외한 모든 경로의 구성 요소를 렌더링하는 레이아웃 구성 요소와 중첩 경로에 대한 콘센트를 만듭니다.

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet />
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />}>
          <Route path="/" element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  );
};

경로 구성 및 useRoutes 후크

또는 , 경로 구성 및 useRoutes 후크를 사용하여 경로:

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

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

const App = () => {
  const routes = useRoutes(routesConfig);

  return routes;
};

경로 구성 및 데이터 라우터(v6.4.0 전용)

React Router v6.4.0부터는 데이터 라우터를 사용하여 정의할 수도 있습니다. 내 경로:

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

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

const router = createBrowserRouter(routesConfig);

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

위 내용은 React Router v6에서 다양한 레이아웃을 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!