Как передать {...props} в React-router?

Question

[Ninja Mate]

Не могу найти способ передачи {...this.props}

Вот App.js

import { UserHome } from './UserHome';
import { NewPatient } from './NewPatient';
...

                           <Router history={hashHistory}>
                                <Route path="/" component={UserHome}></Route>
                                <Route  path="NewPatient" component={NewPatient} ></Route>
                          </Router>

и есть UserHome.js

constructor(...args) {
        super(...args);
        this.state = {
            patient_ur:''
        };

    changeNewPatient(){
        this.props.history.push("NewPatient");
    }
<Button onClick={()=>{
                                this.setState({patient_ur: this.searchPatient()});
                                this.changeNewPatient();
                        }} ....

Как передать patient_ur из UserHome в NewPatient ?

Answer 1

[Никита Гущин]

Чтобы передать props из UserHome в NewPatient нужно чтобы последний был дочерним роутом первого:

В camelCase не стоит делать path - т.к. он регистронезависимый

<Router history={hashHistory}>
  <Route path="/" component={UserHome}>
    <Route  path="NewPatient" component={NewPatient}  />
  </Route>
</Router>

Тогда в UserHome надо делать так:

return (
  <div className="UserHome ">
    {this.props.children && React.cloneElement(this.props.children, {
      patientUr: this.state.patient_ur
    })}
  </div>
)

Comments

[Ninja Mate]

Спасибо, работает, но мне скорее всего придется переделать свое приложение...

[Никита Гущин]

Ninja Mate: Вам нужен redux) или какой-другой flux, чтобы структура была

[Ninja Mate]

Никита Гущин: я тут как раз над этим думаю Насколько тяжело переделать приложение React под Redux?