Heim >Web-Frontend >js-Tutorial >Wie schließe ich NavBar und SideBar von bestimmten Routen in React Router v6 aus?
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.
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.
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.
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!