如何使用react-router通过路由将props传递给react组件

Question

我想传递一些道具到组件上的IndexRoute。下面是我的代码片段:

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加载为子组件，但我想将一些道具从路由部分传递给组件。

我怎样才能得到这个?

请指引我。

谢谢,Vijay

Answer 1

使用cloneWithProps()克隆元素

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

传递给<IndexRoute />

<IndexRoute component={newStep1} />

这个应该可以…

参考

Answer 2

在你的App中添加这一行，而不是children:

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

应该可以。

Answer 3

您可以简单地通过Route对象添加它们，如下所示:

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

然后在Step1组件中你可以让它们再次通过props组件:

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