ネストされた構文を使用してリアクタのルータのマスター詳細設定を行います

Question

マスター/詳細タイプの設定を持つアプリケーションを作成しています。

私は2つの異なる経路たい：

：私は、次の設定を持っている

• /itemsページを一覧表示する項目（全項目）
• /items/item-slugアイテムの詳細ページ（単品）

を

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items"> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

リスティングルートは機能しますが、item rout eに達することはありません（アイテムページの代わりにリストページを表示）。

すべては次のような構造で期待通りに動作します：

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items" /> 
    <Route name="itemDetail" component={ItemDetail} path="items/:itemSlug" /> 
</Route> 

...しかしreact-router's documentationを読んだ後、私は私の好意にネスティングを使用することができた印象の下にありました。

ルーティングが期待どおりに機能するように最初のスニペットに変更を加えることはできますか？また、2番目のスニペットはこの機能に対処する正しい方法ですか？

Answer 1

からitems/パスコンポーネントをストリップ

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items"> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

を試してみてください。私がすることは次のようなものです：

<Route name="app" component={App} path="/"> 
    <IndexRedirect to="items" /> 
    <Route path="items"> 
    <IndexRoute name="itemList" component={ItemList} /> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

Answer 2

あなたが他の内側にネストすることはできません1、ItemListの内側に巣ItemDetailにしたくないと仮定するとitemDetailルート

Answer 3

ルートを入れ子にしているので、親コンポーネントは子をレンダリングする必要があります。あなたがメールで送信そう

render(){return(<div>{this.props.children}</div>});}