Wie rendere ich verschiedene Layouts in React Router v6?

Rendern von Komponenten mit unterschiedlichen Layouts/Elementen mit React Router v6

In React Router v6 kann das Rendern von Komponenten mit unterschiedlichen Layouts oder Elementen erreicht werden Verwendung verschachtelter Routen oder einer Routenkonfiguration mit dem useRoutes-Hook.

Verschachtelt Routen

Um die und Komponenten auf allen Routen außer der Anmelderoute erstellen, eine Layoutkomponente erstellen, die sie rendert, und einen Ausgang für verschachtelte Routen.

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>
    </>
  );
};

Routenkonfiguration und VerwendungRouten-Hook

Alternativ , verwenden Sie eine Routenkonfiguration und den useRoutes-Hook, um Ihre Routen zu definieren:

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;
};

Routen Konfiguration und Datenrouter (nur v6.4.0)

Ab React Router v6.4.0 können Sie auch Datenrouter verwenden, um Ihre Routen zu definieren:

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} />;
};

Das obige ist der detaillierte Inhalt vonWie rendere ich verschiedene Layouts in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!