Question

我是redux和react-router-dom的新手，在我的React应用程序中遇到了一些问题。

我有一个父路由（/app），它具有三个嵌套路由（/app/app1，/app/app2等）。转到/app应该路由到app1，app2或app3，具体取决于Redux存储中的路径。

我必须修复的错误是-当我当前在其中一条嵌套的应用程序路线上时，单击“应用程序”链接时，而不是停留在该页面上，而是路由回到/app。我想单击应用程序链接以保留用户所在的任一嵌套应用程序。

路由设置如下。

<Route path='/app'>
  <App>
     <Switch>
       <Route path='/app/app1' component={ app1 } />
       <Route path='/app/app2' component={ app2 } />
       <Route path='/app/app3' component={ app3 } />
     </Switch>
  </App>
</Route>

到应用程序的导航链接

<ButtonLink onClick={ () => { history.push('/app') }>Application</ButtonLink>

App组件使用react-router-dom中的withRouter和componentDidMount()来基于Redux存储设置路径app1，app2，app3。

componentDidMount() {
  const { path, history } = this.props
  if (havePermission) history.push(path)
}

默认值为app1，但是一旦用户在导航时单击app1，app2，app3链接，它将保存相应的路径。

handleClick(path) {
  const { savePath, history } = this.props
  history.push(path)
  savePath(path)
}

我已经尝试使用componentDidUpdate进行了几项操作，并将location.pathname与prevProps.location.pathname进行比较，并将当前路径推送到历史记录，但是这可以解决单击链接时的父应用程序路由问题，后退按钮不再向后导航。

那么，如何使父路由/app保留在Redux存储的任何嵌套路由中，因为只有在安装组件时才能正常工作？

单击父链接时转到子路由

0 个答案: