单击父路由时保持子路由相同答案

【问题标题】：Keeping the child route same on click of the parent route单击父路由时保持子路由相同
【发布时间】：2019-12-10 19:12:09
【问题描述】：

我有两条父路由 /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/first，即使我已经在/app 上。

Here 是这个问题的沙盒。

【问题讨论】：

如果您的目标是首先渲染，您是否尝试过<Route path="/app" component={First} />
@techipank 是的，我做到了，但我也希望改变路线。您的方法将保留/app 的路径并呈现第一个组件。我希望有/app/first 然后只渲染第一个组件。

标签： javascript reactjs react-router react-router-dom

【解决方案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”？是吗？

【讨论】：

这行得通，但是每次我点击同一个链接时页面都会刷新。然而，早些时候情况并非如此。
尝试使用传递给您的路线的位置道具，reacttraining.com/react-router/web/api/location。比如， location. === '/app' ？ null : }/>