Как передать реквизиты для реагирования компонента через маршрутизацию с помощью реактивного маршрутизатора?

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

На начальной нагрузке я могу загрузить шаг1 как ребенок, но я хочу, чтобы передать некоторый реквизит из секции маршрутизации компоненты.

Как я могу это получить?

Прошу вас, руководствоваться.

Спасибо, Vijay

Answer 1

Клонирование elemnt с помощью cloneWithProps()

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

и передать его <IndexRoute />

<IndexRoute component={newStep1} /> 

Это должно работать ..

Reference

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