Question

我很反应，我遇到了一个问题，当我使用react-router时，记下以下代码：

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

但它失败并说这个.props未定义。:(

Answer 1

执行道具传递的功能组件是正确的方法。

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

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

Answer 2

react-router只注入这些道具
（1）位置（2）参数（3）路线（4）routeParams （5）孩子

所以如果你想获取数据并申请
1.使用onEnter函数获取数据
2.编写高阶组件

Answer 3

改为使用以下语法：

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

添加道具到路径组件

3 个答案: