使用react-router-dom v6渲染具有不同布局/元素的组件：我怎样才能实现这一点？-PHP中文网问答

我在编写代码来呈现没有导航栏和侧边栏的登录页面时遇到问题。我遇到过一些提出类似问题的页面，但似乎都不适合我目前的情况。

如何在反应路由器的登录页面中隐藏导航栏给出的例子很棒，但我相信完成相同任务的方式已经随着react-router-dom v6而改变了，这让我在https://dev.to/iamandrewluca/private-route-in-react-中阅读了有关此更改的信息路由器-v6-lg5

看来我不理解有关 React Router 路由的某些方面。在下面的代码中我有两条路线。我希望在没有导航栏和侧栏组件的情况下渲染路线之一（登录）。

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

我也尝试过的另一种选择是将导航栏和侧栏标签移到仪表板组件中，但随后我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下，但如果这是正确的方法，我会做必要的事情

编辑：我认为重要的是包括它当前所做的事情是加载包含导航栏和侧边栏的登录页面。导航到仪表板组件有导航栏和侧边栏，但这是有意的。我希望登录页面没有导航栏和侧边栏

import { Outlet } from 'react-router-dom'; const AppLayout = () => ( <>

// <-- nested routes rendered here

); const App = () => { return ( <> } /> } > } /> // <-- nested routes ); };

使用路由配置和 useRoutes 挂钩

const routesConfig = [ { path: "/login", element: , }, { element: , children: [ { path: "/", element: , }, ], }, ];

...

import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes(routesConfig); return routes; };

使用路由配置和数据路由器（在 v6.4.0 中引入）

const routesConfig = [ { path: "/login", element: , }, { element: , children: [ { path: "/", element: , }, ], }, ];

...

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter(routesConfig); const App = () => { return ; };