javascript - 如何使用 react-router-dom v6 渲染具有不同布局/元素的组件

Question

我无法编写代码来呈现没有导航栏和侧边栏的登录页面。我遇到了一些提出类似问题的页面，但似乎与我目前的情况无关。
How to hide navbar in login page in react router
给出的例子很好，但我相信完成相同任务的方式已经随着 react-router-dom v6 的变化而导致我在 https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5 中阅读了这个变化。
似乎我不了解使用 React Router 进行路由的某个方面。在下面的代码中，我有两条路线。我希望在没有 NavBar 和 SideBar 组件的情况下进行渲染的路线之一(登录)。

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

我也尝试过的另一种方法是将 NavBar 和 SideBar 标签移动到 Dashboard 组件中，但是我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下，但如果这是正确的做法，我会做必要的
编辑:我认为重要的是要包括它当前所做的就是加载包含 NavBar 和 SideBar 的登录页面。导航到仪表板组件具有 NavBar 和 SideBar，但这是有意的。
我想要的是登录页面没有导航栏和边栏

Answer 1

如果我理解您的问题，您希望在非登录路线上呈现导航和侧边栏。为此，您可以创建一个呈现它们的布局组件和嵌套路由的导出。
例子:

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};