如何使用react-router通过路由将道具传递给反应组件？答案

【问题标题】：How to pass props to react component through routing using react-router?如何使用react-router通过路由将道具传递给反应组件？
【发布时间】：2016-09-30 18:16:20
【问题描述】：

我想将一些道具传递给 IndexRoute 上的组件。下面是我的代码 sn-p：

render(root: Element) {
    const { store, params } = this as any;
    ReactDOM.render(
          <Provider {...{ store }} >
              <Router history={browserHistory}>
                  <Route path={window.location.pathname} component={App}>
                    <IndexRoute component={Step1} />
                    <Route path="step1" component={() => (<Step1 params={params} />)} />
                    <Route path="step1" component={() => (<Step2 params={params} />)} />
                  </Route>
            </Router>
          </Provider>
   , root);

}

//App Component
import * as React from 'react';


export var App: any = ({children}) => (

    <div>
        <div>{children}</div>
    </div>
)

在初始加载时，我可以将 step1 作为子项加载，但我想将一些道具从路由部分传递给组件。

我怎样才能得到这个？

请指导我。

谢谢，维杰

【问题讨论】：

标签： reactjs react-router react-redux

【解决方案1】：

使用cloneWithProps()克隆元素

var newStep1 = cloneWithProps(Step1, {prop1: 'value', prop2: 'value'});// add props

并将其传递给<IndexRoute />

<IndexRoute component={newStep1} />

这应该可行..

Reference

【讨论】：

【解决方案2】：

在您的应用程序中而不是 children 添加此行：

{React.cloneElement(children, {params: params})}

应该可以的。

【讨论】：

【解决方案3】：

您可以像这样通过Route 对象简单地添加它们：

<Route path="step1" someParams={params} component={Step1} />

然后在Step1 组件中，您可以再次通过props 获取它们：

render() {
    console.log(this.props.route.someParams);
}

【讨论】：