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

#reactjs #react-router #react-redux

#reactjs #react-router #react-redux

Вопрос:

Я хочу передать некоторые реквизиты компоненту в 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 как дочерние элементы, но я хочу передать некоторые реквизиты из раздела маршрутизации компоненту.

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

Пожалуйста, направьте меня.

Спасибо, Виджай

Ответ №1:

Клонируйте элемент с помощью cloneWithProps()

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

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

 <IndexRoute component={newStep1} />
  

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

Ссылка

Ответ №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);
}