react router 2レベルのダイナミックルータをどのように編成するのですか？

Question

どのようにすべてのディレクトリのコンポーネントをレンダリングする方法ディレクトリ ため 良いが、doesntの仕事を仕事、私は地区のために、この

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

のような構造を持っている2レベル のためのダイナミックなルータを整理するには？

App.js

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

Answer 1

巣districtルートでごdirectoryルート。

あなたは私はスラグ使用browserHistory.push(this.slug) を追加しましたが、私は私が今持っている。この

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

などのフルパス名を追加する必要私の問題 のための解決策を見つけたあなたのroutes

として

<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

をリファクタリングする必要があります経路の構造に従う。

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