在根问题上反应嵌套路由

Question

当我尝试在根路由上设置嵌套路由时，我遇到了问题。 我有 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>

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

知道出了什么问题吗？

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

Answer 1

您的链接需要指向"/home/testX"，嵌套路由需要处理"/home/testX"。此外，您还需要根目录中的"/home" 路由。我不相信 Link 组件的范围仅限于调用它的路由。这意味着链接到"/test1" 假定这是基本路线。然而，test1 的渲染实际上发生在 home 组件中。

换一种说法：为了到达/home/test1，你必须首先让home组件（/home）渲染，然后渲染test1的路由（/home/test1）

这是codesandbox

这是一个提供更多灵活性的示例codesandbox。这需要重定向“/”，因为它取决于所使用的路径，并且需要是“/home”而不是“/”。

希望这会有所帮助。希望我没问题。

Answer 2

Switch 组件确保只呈现第一个匹配的Route。要阻止 <Route path="/" component={Home} /> 始终被渲染，您可以将 exact 属性设置为 true。

示例 (CodeSandbox)

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