javascript - 单击父路线时保持子路线相同

Question

我有两个父路由 /home 和 /app。

在 /app 中还有两个嵌套路由。 /app/first 和 /app/second

--/home

--/app
  --/app/first
  --/app/second

我已在主页上设置了在 /home 和 /app 内路由的链接。

当我点击 /app 时，我希望将用户重定向到 /app/first，这是我使用 Redirect 实现的组件并且它工作正常，但仅在第一次单击时有效。当我再次单击 /app 路线时，它不会再次重定向到 /app/first 而是回退到 /app

即使我已经在 /app 上，每次点击 /app 链接时如何保持路由到 /app/first >.

Here是针对此问题的沙箱。

Answer 1

尝试

<Switch>
      <Route exact path="/app" render={() => <Redirect to="/app/first"/>}/>
      <Route path="/app/first" component={First} />
      <Route path="/app/second" component={Second} />
</Switch>

在您的 app.js 文件中。

那么您想要的是默认的“/app”路由来渲染 {first} 组件并在浏览器路径中显示“/app/first”？是吗？