Comment rendre différentes mises en page dans React Router v6 ?

Rendu de composants avec différentes mises en page/éléments à l'aide de React Router v6

Dans React Router v6, le rendu de composants avec différentes mises en page ou éléments peut être obtenu en utilisant des routes imbriquées ou une configuration de routes avec le hook useRoutes.

Nested Itinéraires

Pour afficher la et composants sur toutes les routes à l'exception de la route de connexion, créez un composant de mise en page qui les restitue ainsi qu'une sortie pour les routes imbriquées.

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

Configuration des routes et utilisationRoutes Hook

Alternativement , utilisez une configuration de routes et le hook useRoutes pour définir vos routes :

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

Routes Configuration et routeurs de données (v6.4.0 uniquement)

Depuis React Router v6.4.0, vous pouvez également utiliser des routeurs de données pour définir vos itinéraires :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!