如何使用REACT-ROUTER-DOMV6呈现具有不同布局/元素的组件 [英] How do I render components with different layouts/elements using react-router-dom v6

问题描述

我在编写代码以呈现没有导航栏和侧边栏的登录页面时遇到了问题。我看到一些页面提出了类似的问题，但似乎没有一个页面与我的当前情况有关。

How to hide navbar in login page in react router 给出的例子很棒，但我相信完成相同任务的方式已经改变了，在https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5

中看到了这一改变

似乎我对使用Reaction路由器进行路由的某个方面不太了解。在下面的代码中，我有两条路线。其中一个路线(登录)我希望在没有导航栏和侧边栏组件的情况下进行呈现。

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和侧边栏标记移动到Dashboard组件中，但我基本上必须对任何新组件执行相同的复制和粘贴操作。这种方法感觉是错误的和低效的，但如果这是正确的方法，我会做必要的事情

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

推荐答案

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

示例：

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

这篇关于如何使用REACT-ROUTER-DOMV6呈现具有不同布局/元素的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！