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

【问题标题】：How do I render components with different layouts/elements using react-router-dom v6如何使用 react-router-dom v6 渲染具有不同布局/元素的组件
【发布时间】：2021-12-28 03:09:20
【问题描述】：

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

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，但这是有意的。我想要的是登录页面没有导航栏和侧边栏

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案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 path="/" element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};

【讨论】：

这很好用。我将不得不在 Outlet 上做更多的阅读。它出现在反应路由器 v5 中明确定义了嵌套路由，但使用 Outlet 不再是这种情况
@RockoDaBoat 是的，在 RRDv6 中，嵌套路由是使用相对链接/路由构建的，因此您不需要使用当前嵌套级别的 url 和 path 来构建它们。 API 得到了很大改进。

【解决方案2】：

隐藏导航栏的最简单方法是转到登录页面组件并调用 useLocation()。然后你会在声明使用位置后做这样的事情。并将其分配给变量位置 { location.pathname === "/login" ?空：（

渲染整个导航栏组件）；

如果你能在我用手机打字的时候阅读，那就不行了

【讨论】：