hinzufügen Requisiten zu routen Komponente

Question

i sind neu zu reagieren, und ich mit einem Problem begegnet, dass wenn ich den reagieren-Router, und notieren Sie den folgenden Code:

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

ReactDom.render ( Router , ulElement);

Ich möchte die Komponente in Route kann mit einigen Stützen angebracht werden, wie folgt aus:

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

so, dass ich die „Daten“ in der Render-Funktion der App laufen kann.

und der App-Komponente ist wie folgt definiert:

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>) 

    } 

});

kann mir jemand dabei helfen? Ich habe mit der Lösung versucht:

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

aber es versäumt und sagen this.props undefiniert ist :(

Answer 1

reagieren-Router nur diese Stützen injizieren
(1) Ort (2) params. (3) Route (4) routeParams (5) Kinder

so, wenn Sie Daten abrufen möchten und
1. Verwendung gelten OnEnter Daten erhalten funktionieren
2. schreiben Sie höherwertige Komponente

Answer 2

Eine Funktionskomponente, die die Prop passing durchführt, ist der richtige Weg zu gehen.

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

Die oben geht alle benutzerdefinierten Parameter, die Sie wollen, wie data und durchläuft auch alle durch den Router injiziert Requisiten. Ich mag diese Lösung wegen ihrer Kürze. Sie könnten natürlich die Funktionskomponente in einer Variablen speichern und diese als Routenkomponente weitergeben, wenn Sie möchten, dass Ihr Code aussagekräftiger ist.