如何通過道具使用react-router通過路由來反應組件？

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

初始加載我能夠加載第一步爲孩子，但我想從路由部分組件通過一些道具。

我怎樣才能得到這個？

請指導我。

感謝， 維傑

Answer 1

克隆使用cloneWithProps()

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

，並通過它的elemnt到<IndexRoute />

<IndexRoute component={newStep1} /> 

這應該工作..

Reference

Answer 2

在你的應用程序，而不是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); 
}