固定レイアウトのSPAのリアクタの設定

Question

これは私の最初の投稿です。すべてをカバーしていて、さまざまなトピックの検索を行い、いくつかのvidsを見て、反応が遅くなる前に反応ルータのドキュメントを読んでください。

:-(私は、次のコンポーネントが単一ページアプリ、に取り組んでいます：子コンポーネント - ： -

• 地図

  • レイアウト親コンポーネントを、2人の子供を持っています

  • イベント - 子コンポーネント、子コンポーネントが1つあります。
    • EventDetails
    すべての回でページのレイアウト・コンポーネントを維持し、マップとイベントをレンダリングするためにルータを反応させる設定しようとすると

。イベントの内部で、event_id（リンクが機能している）のリンクをクリックすると、EventDetailsに表示されます。イベントに表示するEventDetailsコンポーネントを取得する方法についてはわかりませんが、レイアウトはまだ表示されています。

私は自分のルートが誤って設定されているか、IndexRouteを完全に理解していないと確信しています。

私のルータの設定の下の画像といくつかのコード。

レイアウト図のimgurリンク：http://i.imgur.com/lOtpWqE.png

そして

へのリンクは、ルータの設定を反応させる：

<Router history={hashHistory}> 

<Route path="/" component={Layout} > 
    <Route path="/events/:event_id" component={EventDetail} /> 
</Route> 

Answer 1

が反応-ルータによって可視でなければならないかを制御コンポーネントをchildren支柱に注入する。

のは、あなたが以下のルートを持っている想像してみましょう：

<Route path="/" component={Layout} > 
    <Route path="/maps" component={Maps} /> 
    <Route path="/events/" component={Events}> 
     <Route path="/events/:event_id" component={EventDetail}> 
    </Route> 
</Route> 

これらのルートを使用すると、/mapsパスやイベントコンポーネントたときに上にあるときに反応-ルータが自動的にレイアウト・コンポーネントにchildren小道具としてMapsコンポーネントを渡します/eventにあります。ネストしたコンポーネント/ルートでも同じことが起こります。あなたの仕事は、他のネストされたコンポーネントを表示したいルートコンポーネントと子コンポーネントのレンダリングメソッドで{this.props.children}を使用することです。あなたのレイアウト・コンポーネントは、メソッドは次のようになります。レンダリングまとめると

：

render() { 
    <div> 
     <div> [LAYOUT] This part doesn't change between routes </div> 
     <div> 
      {this.props.children} // here I render nested component like events or maps 
     </div> 
    </div> 
} 

その後、あなたのイベントのコンポーネントここで

render() { 
     <div> 
      <div> [EVENT] This part doesn't change between nested event routes </div> 
      <div> 
       {this.props.children} // here I render nested component inside event route like EventDetails 
      </div> 
     </div> 
    } 

あなたが反応し、ルータのためのレッスンのコレクションを持っている：（ https://github.com/reactjs/react-router-tutorial/tree/master/lessons をレッスン7はあなたのケースです）。

IndexRouteは、ルートコンポーネントであり、path="/"