Comment exclure NavBar et SideBar d'itinéraires spécifiques dans React Router v6 ?

Rendu de composants avec des mises en page variables dans React Router v6

React Router v6 vous permet de restituer des composants avec différentes mises en page et éléments. Relevons le défi spécifique auquel vous êtes confronté : exclure la barre de navigation (NavBar) et la barre latérale (SideBar) d'un itinéraire spécifique, à savoir la page de connexion (LoginPage).

Par défaut, React Router affiche les itinéraires dans le même disposition, y compris des composants tels que NavBar et SideBar. Pour remplacer ce comportement, introduisez un composant de mise en page distinct qui englobe les éléments souhaités et fournit un débouché pour les itinéraires imbriqués.

Utilisation des itinéraires imbriqués

Créez un composant de mise en page, AppLayout, qui encapsule NavBar et SideBar. .

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

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

Modifiez le composant de votre application pour l'utiliser layout :

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

Cette approche restitue la page de connexion sans NavBar et SideBar et les inclut pour l'itinéraire du tableau de bord imbriqué dans AppLayout.

Utilisation de la configuration des routes et de useRoutes Hook

Une alternative La méthode consiste à définir un objet de configuration de routes et à utiliser le hook useRoutes. Voici comment :

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

Cette approche restitue dynamiquement les routes en fonction de la configuration des routes.

Utilisation de la configuration des routes et des routeurs de données (introduit dans la version 6.4.0)

Avec React Router v6.4.0, vous pouvez utiliser des routeurs de données pour obtenir le même résultat résultat :

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

Cette approche implique la création d'une instance createBrowserRouter et l'utilisation de RouterProvider pour restituer les routes.

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!