如何在 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 Hook

或者，使用路由配置和 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中文网其他相关文章！