React Router v4 并行路由答案

【问题标题】：React Router v4 Parallel RoutesReact Router v4 并行路由
【发布时间】：2018-01-18 21:55:36
【问题描述】：

我的网站上有一个左侧导航，当点击其中的一个项目时，我会向他们展示一个组件**（又名主页）**。一个主页被渲染。我在页面上有一些按钮，单击时会根据单击的内容将主页替换为其他组件。问题是要渲染的新组件的路径是写在主组件中的，所以当有人点击主组件中的链接时，我希望它自行卸载并安装一个新组件示例：

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}/>

所以当我点击左侧导航栏上的按钮时，它会呈现 /dashboard/SessionManager

但是当我单击 SessionManager 组件中的链接时，我需要路由到父路径

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

所以我需要重定向是 dashboard/DialPatters 而不是 dashboard/SessionManger/DialPatters

【问题讨论】：

这是为了保持动态，主要问题是我拥有的所有路由 /dashboard/Home ${this.props.match.path}/Admin 等都在 app.js 所以当单击时路由更改为 /dashboard/SessionManger 它呈现具有 /dashboard/DialPatterns 路由的 SessionManger 组件但是当我在单击事件上启用该路由时，组件剂量呈现

标签： reactjs react-router react-router-v4

【解决方案1】：

只需添加根斜线'/'：

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

【讨论】：