React中登录页面后，如何在边栏导航中配置路线

Question

我正在React中设计一个用户面板，其中用户登录并通过其他链接导航到他的面板，如Archived、Profile和Settings。我的登录然后导航到主页运行良好。我在边栏中设计了仪表板、存档、配置文件和设置页面链接。现在，当我导航到链接时。它将我带到一个新的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>
);

一旦用户在主页上，我需要显示仪表板和其他链接。当用户点击任何边栏链接时，当其他页面打开时，边栏应该仍然存在。所以我在主页.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>
);

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

谢谢。

Answer 1

问题

问题是，您正在精确地匹配"/"以渲染HomePage，但一旦路径更深(如"/archived"(，它就不再完全匹配，并且HomePage将被卸载。

您不应该在另一个Router中呈现Router，每个应用程序只需要一个路由器即可提供路由上下文。

解决方案

删除内部路由器(和任何其他嵌套路由器！！(。删除"/"路径上的exact道具，并对路由进行重新排序，以便在不太特定的路径之前指定更特定的路径，这样Switch就可以实际完成其工作，匹配并呈现适当的路由。

应用

在不太特定的"/"路径之前，重新排序要匹配的更具体的"/login"和"/register"路径。例如，如果你有一个"/login/google"路径，这比"/登录"；并且会更早订购。

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

Answer 2

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