Передача значения в другой компонент с маршрутизацией?

Question

[Lepshce]

Есть две страницы в приложении:
1. GetInfoPage.jsx (/get-info)
2. ShowInfoPage.jsx (/show-info)

Со страницы (1) необходимо передать объект вида
{surname: '', name: ''}
на страницу (2) и значение name вывести в input.
В результате открывается страница (2), нужное значение в input не появляется (содержимое объекта undefined), кнопки и прочие элементы на странице (2) не работают и появляются ошибки:

Warning: [react-router] `props.history` and `context.history` are deprecated. Please use `context.router`
Uncaught TypeError: Cannot read property 'name' of undefined (InputForm.jsx)

Подскажите пожалуйста, как исправить

GetInfoPage.jsx

import React, { PropTypes, Component } from 'react';
// import { Router, Route, browserHistory } from 'react-router';
import ShowInfoPage from './ShowInfoPage';
<...>

const propTypes = { 
  history: PropTypes.object
};

class GetInfoPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newElement: '',     
      isClick: false
    };
    this.checkClick = this.checkClick.bind(this);
  } 

  checkClick() {    // при щелчке по объекту необходимо сменить роут и передать объект
    this.setState({ isClick: true });
    this.props.history.push('//show-info');
  }

  render() {
    if (this.state.isClick) {         // если по объекту щёлкнули - передаём объект
      return <ShowInfoPage newElement={this.state.newElement}/>;
    }
    return ( 
     <...> // иначе рендерим текущую страницу GetInfoPage
    );
  }
}

ShowInfoPage.jsx

import React, { PropTypes, Component } from 'react';
import InputForm from './InputForm';

const propTypes = { 
  newElement: PropTypes.object
};

class ShowInfoPage extends Component {
  constructor(props) {
    super(props);   
  }

  render() {
    return (
      <div>
          <...>   // передаём в компонент InputForm полученный объект
             <InputForm newElement={this.props.newElement}/>
          <...>
      </div>
    );
  }
}

InputForm.jsx

import React, { PropTypes, Component } from 'react';

const propTypes = {  
  newElement: PropTypes.object
};

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: ''
    };
    this.setValue = this.setValue.bind(this);
  }

  componentDidMount() {          // попытки проверить есть ли объект
    console.log(this.props.newElement);
    // if (this.props.newElement.name.length > 0) {
    //   this.setValue();
    // }
    if (this.props.newElement !== 'undefined') {
      this.setValue();
    }
  }

  setValue() {        // установить значение в input
    this.setState({ value1: this.props.newElement.name });
  }

  render() {
    return (
      <form className='row form'>
       <...>
            <input id='nameInput' name='nameInput'
              type='text' required value={this.state.value1}
            />
         <...>
      </form>
    );
  }
}

Файл с роутами:
Routes.jsx

import React from 'react';
import { Route, IndexRoute, browserHistory, Router } from 'react-router';
<...> // другие страницы приложения
import GetInfoPage from 'components/GetInfoPage';
import ShowInfoPage from './components/ShowInfoPage';

export default (
  <Router history={browserHistory}>
    <Route component={App} path='/'>
      <IndexRoute component={MainPage}/>
      <...>
      <Route component={ShowInfoPage} path='show-info'/>
      <Route component={GetInfoPage} path='get-info' history={browserHistory}/>      
    </Route>
  </Router>
);

Comments

[Роман Александрович]

https://codesandbox.io сюда выложите проект

[Антон Спирин]

Вы из какого года пишите? В React уже давно не входит пакет PropTypes, а в react-router не входит browserHistory.
Совет из 2018: не читайте старых статей по React разработке.

Answer 1

[Sergey Epifanov]

используйте это
ну и у вас ошибка из-за того, что используете this.props.newElement.name , в то время как у вас this.props.newElement равен undefined

Comments

[Lepshce]

Спасибо)
Есть какие-то особенности при передаче объекта таким образом? Потому что сколько не пытался, всё равно на второй странице объект undefined

[Sergey Epifanov]

Lepshce, попробуйте во втором аргументе push передавать нужные данные (примеры в комментах https://stackoverflow.com/questions/42173786/react...)