react -router v4中的嵌套路由

Question

<Provider store = {store}>
    <Router history = {history} >
       <section>
            <HeaderWithRouter>
                <Route exact path = "/admin" component={Admin}/>
                <Route exact path = "/deal" component={FormDeal}/>
                <Route exact path="/chart" component={Mycharts}/>
                <SubHeaderWithRouter>
                    <Route exact path="/dealview" component={FinalTable}/>
                    <Route exact path = "/mandate" component={Mandate}/>
                </SubHeaderWithRouter>  
            </HeaderWithRouter>
            <Footer/>
       </section>
  </Router>
  </Provider>

我只需要为其中指定的子路线呈现SubHeaderWithRouter，即FinalTable和Mandate。 目前为每条路线都会呈现SubHeaderWithRouter。

Answer 1

您可以指定要为其呈现SubHeaderWithRouter组件

的正则表达式路径

<Provider store = {store}>
    <Router history = {history} >
       <section>
            <HeaderWithRouter>
                <Route exact path = "/admin" component={Admin}/>
                <Route exact path = "/deal" component={FormDeal}/>
                <Route exact path="/chart" component={Mycharts}/>
                <Route path="/(dealview|mandate)" component={SubHeaderWithRouter}/>
            </HeaderWithRouter>
            <Footer/>
       </section>
  </Router>

然后在其中，指定实际的Routes喜欢

render() {
    return (
         <div>
             {/*other things*/}
             <Route exact path="/dealview" component={FinalTable}/>
             <Route exact path = "/mandate" component={Mandate}/>
         </div>
     )

}