向管线组件添加道具

Question

我是react新手，在使用react路由器时遇到了一个问题，并写下以下代码：

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"},{},{}...]} />

这样我就可以迭代应用程序的渲染函数中的“数据”。

App组件定义如下：

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

请改用以下语法：

<Route path="/monitor/" render={() => <App data = {linksData}></App>} />

Answer 2

react router仅注入这些道具
（1）位置（2）参数（3）路由（4）路由图（5）子级

因此，如果要获取数据并应用
1。使用onEnter函数获取数据
2。写入高阶组件

Answer 3

执行道具传递的功能组件是正确的选择。

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

上面传递了你想要的任何自定义参数，比如data，也传递了路由器注入的所有道具。我喜欢这个解决方案，因为它简洁明了。当然，如果您希望代码更具描述性，您可以将函数组件存储在变量中，并将其作为路由组件传递。