相关疑难解决方法(0)

我正在尝试设置一些嵌套路由来添加公共布局.检查代码:

  <Router>
    <Route component={Layout}>
      <div>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
      </div>
    </Route>
  </Router>

虽然这很好用,但我仍然收到警告:

警告:您不应在同一路线中使用<Route component>和<Route children>; 将被忽略

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

如何在 React Router 的登录页面中隐藏导航栏 给出的示例很棒，但我相信完成相同任务的方式已经随着 React-router-dom v6 的改变而改变，这让我在https://dev.to/中阅读了有关此更改的信息iamandrewluca/private-route-in-react-router-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>
    </>
  );
};

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

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

我正试着用React Router v4渲染多个布局.

例如,我想要具有以下路径的页面具有布局1:

• 确切的路径="/"
• PATH = "/博客"
• 路径="/大约"
• 路径="/项目"

以及具有布局2的以下路径:

• PATH ="/博客/:ID
• PATH ="/项目/:ID

有效地回答了这里的问题,但对于第4版:为反应路由器组件使用多个布局