ルートコンポーネント

Question

に小道具を追加し、私は反応する新たなんだ、と私は、私が使用している場合、ルータを反応させて、次のコードを書き留めておくことを問題と会った：

var router = (
<Router history={browserHistory}> 
    <Route data = {linksData} path = "/monitor/" component = {App}> 
     <Route path = "category/:categoryId" component = {Category}> 
     </Route> 
    </Route> 
</Router> 
); 

ReactDom.render（ ルータを、ulElement）;

私は、ルート内のコンポーネントは、このようないくつかの小道具、を添付することができますしたい：私はアプリのレンダリング機能で「データ」を繰り返すことができるように

<App data={[{id:"01",name:"blah"},{},{}...]} /> 

。

と次のようにアプリケーションコンポーネントが定義されている：

var App = React.createClass({ 
getInitialState:function(){ 
    return { 
     city: "全国", 
     time: new Date().toJSON().slice(0,10), //2016-04-29 
     interval:1000*60 //1 minite 
    } 
}, 
render:function(){ 
    //category:{id: "01",name:"cars"} 
    var lis = this.props.route.data.map(function(category,index){ 
     //pathname+category.categoryId+ 
     var url_path = "/monitor/category/${category.id}"; 
     var url_query = {city:this.state.city,time:this.state.time,interval:this.state.interval}; 

     return (
       <li> 
        <a href={{pathname:url_path,query:url_query}}>{category.name}</a> 
       </li>); 
    }); 

    return (
     <div> 
      <ul className = "grids"> 
       {lis} 
      </ul> 
     </div>) 

    } 

}）。

誰でも私に助けてくれますか？私の溶液を試みた：

<Route data = {linksData} path = "/monitor/" component = {App}> 

それが失敗しthis.propsが未定義であると言う:(

Answer 1

反応ルータをこれらの小道具をのみを注入
（1）位置 （2）のparams。 （3）ルート （4）routeParams （5）子供

ので、あなたがデータをフェッチし、データを取得するために機能するフォーカス取得時
1.使用を適用したい場合は

2.上位コンポーネントを書きます

Answer 2

小道具を通過させる機能コンポーネントが正しい方法です。

<Route path = "/monitor/" component = {props => <App data={linksData} {...props}/>}>

上記dataのように、あなたが望む任意のカスタムパラメータを渡すと、ルータによって注入されたすべての小道具を通過します。私はこの簡潔さのためにこの解決策が好きです。もちろん、変数に関数のコンポーネントを格納し、コードをよりわかりやすいようにするには、ルートコンポーネントとして渡すことができます。