Wie schließe ich NavBar und SideBar von bestimmten Routen in React Router v6 aus?

Rendern von Komponenten mit unterschiedlichen Layouts in React Router v6

React Router v6 ermöglicht Ihnen das Rendern von Komponenten mit unterschiedlichen Layouts und Elementen. Lassen Sie uns die spezifische Herausforderung angehen, vor der Sie stehen: das Ausschließen der Navigationsleiste (NavBar) und der Seitenleiste (SideBar) von einer bestimmten Route, nämlich der Anmeldeseite (LoginPage).

Standardmäßig rendert React Router Routen innerhalb der gleiches Layout, einschließlich Komponenten wie NavBar und SideBar. Um dieses Verhalten zu überschreiben, führen Sie eine separate Layoutkomponente ein, die die gewünschten Elemente umfasst und einen Ausgang für verschachtelte Routen bietet.

Verwendung verschachtelter Routen

Erstellen Sie eine Layoutkomponente, AppLayout, die NavBar und SideBar kapselt .

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

Ändern Sie Ihre App-Komponente, um dies zu verwenden Layout:

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

Dieser Ansatz rendert LoginPage ohne NavBar und SideBar und schließt sie für die in AppLayout verschachtelte Dashboard-Route ein.

Verwenden der Routenkonfiguration und des useRoutes-Hooks

Eine Alternative Methode besteht darin, ein Routenkonfigurationsobjekt zu definieren und den useRoutes-Hook zu verwenden. So geht's:

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

Dieser Ansatz rendert die Routen dynamisch basierend auf der Routenkonfiguration.

Verwenden von Routenkonfiguration und Datenroutern (eingeführt in Version 6.4.0)

Mit React Router v6.4.0 können Sie Datenrouter einsetzen, um dasselbe zu erreichen Ergebnis:

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

Dieser Ansatz beinhaltet das Erstellen einer createBrowserRouter-Instanz und die Verwendung von RouterProvider zum Rendern der Routen.

Das obige ist der detaillierte Inhalt vonWie schließe ich NavBar und SideBar von bestimmten Routen in React Router v6 aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!