2017-08-10 203 views
0

我在我的网站上有一个左侧导航,当点击它的一个项目时,我向他们展示了一个组件**(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

+0

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

回答

0

只需添加根斜杠 '/':

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