反応ルータを持つ子供に小道具を渡す

Question

コンポーネントをレンダリングする前にサービスを実行するアプリケーションがあり、そのサービスが複数のAPI呼び出しを行うと、車、トラック、自転車のリストなどのデータが取得されます。今度は、ユーザーがどのルートをクリックするかに応じて、それらの小道具を子供に渡したいと思います。もし彼が/車を訪れたら、私はthis.props.childrenの車のデータに送ります、そして、彼が訪問/バイクなら私は自転車のデータを送るでしょう。 MainComponentでどうすれば実現できますか？

<ul> 
    <li><Link to="/">Home</Link></li> 
    <li><Link to="/bikes">Bikes</Link></li> 
    <li><Link to="/cars">Cars</Link></li> 
</ul> 
{this.props.children} 

Answer 1

これを実現するには、反応ルータを使用する必要があります。 2つの別々のコンポーネントを作成します。以下に示すように、反応ルータ定義を使用して、自転車、車、ルートをこれらのページにリンクします。

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={MainComponent}> 
      <Route path="bikes" component={Bikes}> 
      <Route path="cars" component={Cars}> 

     </Route> 
    </Router>, document.getElementById('app') 
);