Nested-Routing in reagieren -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> 

Ich brauche nur für die Teilstrecken angegeben machen Inneren FinalTable und Mandate d.h. Derzeit wird für jede Route gerendert.

Answer 1

Sie können die Regex Pfad angeben, für die Sie die Komponente

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

und dann im Inneren machen möchten, geben Sie die tatsächliche Routes wie

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

}