ネストされた子を持つReact Router？

Question

反応ルータgithubのhuge-appsの例を見ると、私は自分が望むルートを設定する方法がわかりません。

URL  | Result 
-------------------------- 
/sites  | List of sites 
/sites/:id | One site 

私は複数のサイトを一覧表示したい場合は、サイトコンポーネント/ルートは、サイトコンポーネント/ルートで入れ子にする必要があります。したがって、私のフォルダ構造は、反応ルータの例のAssignmentsモデルに似ています。

ただし、/sites/:idルートの場合、サイトコンポーネントには依存しません。サイトディレクトリで同じレベルの別のサイトディレクトリを作成するか、サイトコンポーネントでリストと単体表示をレンダリングできるようにしますか？ index.jsファイルの外観はどうですか？

Answer 1

私はあなたのルートツリーこうして可視化するでしょう：あなたのindex.jsインサイド

/sites 
(Sites.js) 
- /:id1 
    (Site1.js) 
- /:id2 
    (Site2.js) 

を、このような何か（クライアント側の例を使用しては）：

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     <Route path="/sites" component={Sites}> 
     <Route path="/sites/:id" component={Site}/> 
     </Route> 
    </Route> 
    </Router> 
), document.getElementById('app')); 

各ルートは、添付を持っています成分。これらのコンポーネントに必要なものをスローすることはできますが、子ルートに移動する方法を含めると便利です。

PlainRouteバージョン（私はあなたがしたいと思います理由はわからないが）：

const rootRoute = { 
    component: 'div', 
    childRoutes: [{ 
    path: '/', 
    component: require('./components/App'), 
    childRoutes: [ require('./routes/Sites') ] 
    }] 
} 

render(
    <Router history={browserHistory} routes={rootRoute} />, 
    document.getElementById('example') 
); 

'./routes/Sites '：

module.exports = { 
    path: 'sites', 
    getChildRoutes(location, cb) { 
    require.ensure([], (require) => cb(null, [ require('./routes/Site') ])) 
    }, 
    getComponent(nextState, cb) { 
    require.ensure([], (require) => cb(null, require('./components/Sites'))) 
    } 
} 

' ./routes/Site' ：それは/マッピングし、各サイトを作成するときに

module.exports = { 
    path: 'sites/:id', 
    getComponent(nextState, cb) { 
    require.ensure([], (require) => cb(null, require('./components/Site'))) 
    } 
} 

Answer 2

私はあなたが達成しようとしているものを正確に理解していれば、あなたはあなたのルーターの内側に、このような何かを行うことができます：

<Route path="/sites/:id" component={SingleSite} /> 
<Route path="/sites" component={Sites} /> 

SingleSiteコンポーネントがID PARAMを取り、サイトを表示するためにそれを使用しています。 IDがある場合、リアクタはSingleSiteコンポーネントを使用でき、そうでなければSitesコンポーネントを表示する必要があります。