Question

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

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

所以我需要重定向为仪表板/ DialPatters 而不是仪表板/ SessionManger / DialPatters

Answer 1

只需添加根斜杠＆＃39; /＆＃39;：

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

React Router v4 Parallel Routes

1 个答案: