React路由器v4并行路由

问题描述：

我在我的网站上有一个左侧导航，当点击它的一个项目时，我向他们展示了一个组件**（aka。home）**。一个主页被渲染。我在页面上有一些按钮，点击时会根据点击的内容用其他组件替换其他组件。问题是要呈现写在家里组件的新组件，所以当有人在家里组件点击我希望它卸载本身并安装新组件举例路线：React路由器v4并行路由

App Component(app.js) 
==================== 
<Router> 
     <Switch> 
      <Route exact path='/' component={Login}/> 
      <Route path="/dashboard" component={Container}/> 
     </Switch> 
</Router> 

LeftNav Container (Container) 
============================== 
       <Route path='/dashboard/Home' component={Home}/> 
       <Route path={`${this.props.match.path}/Admin`} component={Admin}/> 
       <Route path={`${this.props.match.path}/SessionManager`} component={SessionManagerContainer}/> 
       <Route path={`${this.props.match.path}/CommunicationManager`} component={AccessList}/>

所以当我点击一个按钮，左侧导航它呈现/仪表板/ SessionManager

但是，当我在SessionManager组件点击一个链接，我需要路由到一个父路径

SessionManagerContainer.js 
====================== 
<Route path={`dashboard/DialPatterns`} component={DialPatters}/>

所以我需要重定向是仪表板/ DialPatters没有仪表板/ SessionManger/DialPatters

这是做出保持这种动力，主要问题是我所有的路线 /仪表板/主页 $ {this.props.match.path} /管理等等在app.js 所以当路线改变到/仪表板/ SessionManger点击它呈现SessionManger组件其中有 /仪表板/ DialPatterns路线但是，当我点击事件启用该路线组件剂量呈现 –

答

只需添加根斜杠 '/'：

<Route path="/dashboard/DialPatterns" component={DialPatters}/>

React路由器v4并行路由

相关推荐