时间戳

首页 > 解决方案 > 在根问题上反应嵌套路由

javascript - 在根问题上反应嵌套路由

问题描述

当我尝试在我的根路由上设置嵌套路由时，我遇到了问题。我有 3 条“主要”路线：

<Switch>
  <Route path="/" component={Home} />
  <Route path="/login" component={Login} />
  <Route path="/logout" component={Logout} />
</Switch>

在我的Home组件上，我有一个这样的嵌套路由器：

<div>
  <Route path="/" render={() => <div>Home</div>} />
  <Route path="/test" render={() => <div>Test Route</div>} />
</div>

Home 组件有一个侧边栏 HOC，其中包含链接。

<Sidebar>
  <Link to="/">Home</Link>
  <Link to="/test">Test</Link>
  <Link to="/logout">Logout</Link>
</Sidebar>

当我在我的 Root 组件上并单击Test链接时，嵌套路由器上的路由更改为正确的 Test 组件。每当我进入登录和/或注销路由时，它都会尝试在 Home 组件的嵌套路由器中显示该路由

知道出了什么问题吗？

编辑：我已经尝试过@Tholle 提供的示例。不幸的是，它仍然不能按照我想要的方式工作。请参阅我制作的此CodeSandBox以重现我的问题。

标签： javascriptreactjsreduxreact-router

解决方案

该Switch组件确保仅Route呈现匹配的第一个。要停止<Route path="/" component={Home} />始终呈现，您可以将确切的道具设置为true.

示例（代码沙盒）

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/login" component={Login} />
  <Route path="/logout" component={Logout} />
</Switch>

推荐阅读