React Router v6 使您能够渲染具有不同布局和元素的组件。让我们解决您面临的具体挑战:从特定路由(即登录页面(LoginPage))中排除导航栏(NavBar)和侧边栏(SideBar)。
默认情况下,React Router 在相同的布局,包括 NavBar 和 SideBar 等组件。要覆盖此行为,请引入一个单独的布局组件,该组件包含所需的元素并为嵌套路由提供出口。
创建一个布局组件 AppLayout,它封装了 NavBar 和 SideBar .
import { Outlet } from 'react-router-dom'; const AppLayout = () => ( <navbar></navbar> <sidebar></sidebar> <main classname='{styles["main--container"]}'> <div classname='{styles["main--content"]}'> <outlet></outlet> {/* Outlet for nested routes */} </div> </main> > );
修改您的应用程序组件以使用此组件布局:
const App = () => { return ( <routes> <route path="/login" element="{<LoginPage"></route>} /> <route element="{<AppLayout"></route>}> <route path="/" element="{<Dashboard"></route>} /> {/* Nested route */} </routes> > ); };
此方法渲染不带导航栏和侧栏的 LoginPage,并将它们包含在 AppLayout 中嵌套的 Dashboard 路由中。
另一种选择方法是定义一个路由配置对象并利用 useRoutes 钩子。具体方法如下:
const routesConfig = [ { path: "/login", element: <loginpage></loginpage>, }, { element: <applayout></applayout>, children: [ { path: "/", element: <dashboard></dashboard>, }, ], }, ];
import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes(routesConfig); return routes; };
此方法根据路由配置动态渲染路由。
使用 React Router v6.4.0,您可以使用数据路由器来实现相同的效果结果:
const routesConfig = [ { path: "/login", element: <loginpage></loginpage>, }, { element: <applayout></applayout>, children: [ { path: "/", element: <dashboard></dashboard>, }, ], }, ];
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter(routesConfig); const App = () => { return <routerprovider router="{router}"></routerprovider>; };
此方法涉及创建 createBrowserRouter 实例并使用 RouterProvider 渲染路由。
以上是如何在 React Router v6 中从特定路由中排除 NavBar 和 SideBar?的详细内容。更多信息请关注PHP中文网其他相关文章!