首页 >web前端 >js教程 >如何在 React Router v6 中从特定路由中排除 NavBar 和 SideBar?

如何在 React Router v6 中从特定路由中排除 NavBar 和 SideBar?

DDD
DDD原创
2024-12-23 21:49:171044浏览

How to Exclude NavBar and SideBar from Specific Routes in React Router v6?

在 React Router v6 中渲染具有不同布局的组件

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 Hook

另一种选择方法是定义一个路由配置对象并利用 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;
};

此方法根据路由配置动态渲染路由。

使用路由配置和数据路由器(v6.4.0 中引入)

使用 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn