Reagieren Router Wie organisiert man dynamische Router für 2 Ebenen?

Question

Wie dynamische Router für 2-Ebene zu organisieren Ich habe Struktur wie diese

<Router history={browserHistory} > 
<Route path='/' component={App} data={DISTRICT}> 
    <IndexRoute component={Home} /> 
     <Route path='/:district' component={District}/> 
      <Route path='/:district/:directory' component={Directory}/> 
    </Route> 
    <Route path='*' component={NotFound} /> 
</Router> 

für Bezirk funktionieren gut aber nicht funktioniert für Verzeichnis Wie Komponente des Verzeichnisses machen?

App.js

render() {   
      return (
       <div> 
        <Header/> 
        { this.renderChildren() } 
        <Footer /> 
       </div> 
      ); 
    } 

Answer 1

Nest Ihre directory Route in district Route.

Sie benötigen routes als

<Router history={browserHistory} > 
    <Route path='/' component={App} data={DISTRICT}> 
    <IndexRoute component={Home} /> 
    <Route path=':district' component={District}> 
     <Route path=':directory' component={Directory}/> 
    </Route> 
    </Route> 
    <Route path='*' component={NotFound} /> 
</Router> 

Answer 2

ich für mein Problem gefunden Lösung Refactoring I Slug Verwendung browserHistory.push(this.slug) hinzugefügt, aber ich brauchte vollständige Pfadnamen wie diese

browserHistory.push(location.pathname + this.slug) 

Zugabe Ich habe jetzt die folgende Struktur der Routen

<Router history={browserHistory} > 
<Route path='/' component={App} data={DISTRICT}> 
    <IndexRoute component={Home} /> 
     <Route path=':district' component={District}/> 
      <Route path=':district/:directory' component={Directory}/> 
    </Route> 
    <Route path='*' component={NotFound} /> 
</Router>