如何在 React 中登录页面后配置侧边栏导航中的路由？

Posted 2023-02-22

【中文标题】如何在 React 中登录页面后配置侧边栏导航中的路由？

【英文标题】：How to configure the Routes in Sidebar navigation after Login page in React?

【发布时间】：2021-12-25 18:29:15

【问题描述】：

我正在 React 中设计一个用户仪表板，其中用户登录并使用其他链接（例如存档、配置文件和设置）导航到他的仪表板。我的登录然后导航到主页工作正常。 我在侧边栏中设计了仪表板、存档、配置文件和设置页面链接。现在，当我导航到链接时。它把我带到一个新的 URL 路径，我的边栏消失了。只要我登录，我希望我的侧边栏仍然出现在所有页面上。

下面是我设计上层路由的App.js：

return (
    <div>
      <Router history=history>
        <Switch>
          <PrivateRoute exact path="/" component=HomePage />
          <Route path="/login" component=LoginPage />
          <Route path="/register" component=RegisterPage />
          <Redirect from="*" to="/" />
        </Switch>
      </Router>
    </div>
  );

一旦用户在主页上，我需要显示仪表板和其他链接。当用户点击任何侧边栏链接时，侧边栏应该仍然存在，而其他页面打开。所以我像这样将内部路由添加到 HomePage.jsx：

return (
    <div>
      <Router history=history>
        <Sidebar />
        <Switch>
          <Route path="/" component=Dashboard />
          <Route path="/archived" component=ArchivedPage />
          <Route path="/profile" component=ProfilePage />
          <Route path="/settings" component=SettingsPage />
          /* <Redirect from="*" to="/" /> */
        </Switch>
      </Router>
    </div>
);

但它不起作用。谁能帮我理解这是否正确。或者我怎样才能达到所需的结果。 如果您需要任何其他详细信息，请告诉我。

谢谢。

【参考方案1】：

问题

问题是你完全匹配匹配"/"来渲染HomePage，但是一旦路径更深，比如"/archived"，它不再完全匹配，HomePage 已卸载。

您不应该在另一个Router 中渲染Router，每个应用只需要一个路由器来提供路由上下文。

解决方案

删除内部路由器（和任何其他嵌套路由器！！）。移除 "/" 路径上的 exact 属性并重新排序路由以在不太具体的路径之前指定更具体的路径，以便Switch 可以实际上完成其工作并匹配和呈现适当的路由.

应用程序

将更具体的"/login" 和"/register" 路径重新排序，以便在不太具体的"/" 路径之前进行匹配。例如，如果您有一个"/login/google" 路径，则它比“/login”更具体，并且会更早订购。

return (
  <div>
    <Router history=history>
      <Switch>
        <Route path="/login" component=LoginPage />
        <Route path="/register" component=RegisterPage />
        <PrivateRoute path="/" component=HomePage />
        <Redirect to="/" />
      </Switch>
    </Router>
  </div>
);

主页

将Dashboard 移动到最后一个路由位置，这样如果没有匹配并返回其上方的其他路由，则匹配并呈现仪表板。

return (
  <div>
    <Sidebar />
    <Switch>
      <Route path="/archived" component=ArchivedPage />
      <Route path="/profile" component=ProfilePage />
      <Route path="/settings" component=SettingsPage />
      <Route component=Dashboard />
    </Switch>
  </div>
);

【讨论】：

你是冠军德鲁！！太感谢了。这个解决方案很有魅力！万分感谢！我会记住您提供的宝贵建议。

【参考方案2】：

首先你做错了你不能把路由器放在路由器里面， 您在应用程序中有一个路由器然后在应用程序内部的一个组件中您有另一个路由器这是一个问题我不知道这是否解决了您的问题但尝试它只是删除主页中的路由器

【讨论】：

嗨，我删除了 HomePage.jsx 中的路由器。它在运行应用程序时没有给出任何错误，但行为是相同的。 localhost:8080/profile 之类的路线在新页面中打开，侧边栏消失。

它会消失并且永远不会回来@RajanMishra？

@RajanMishra 查看此处的其他答案以恢复您必须删除主页路线中的确切内容，但如果您不这样做，请将其放在其他路线下方，任何 url 路线都会显示给您主页甚至 /login 和 /register