Как передать данные из компонента в компонент, с помощью routes?

Question

[Hellas]

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      select: false
    };
  }
  render() {
    return <div>{this.state.select}</div>;
  }
}

class Main extends Component {
  send = () => {
    // Отсюда необходимо изменить состояние в Header на this.state.select = true
  }
  render() {
    return <button onClick={this.send}></div>;
  }
}

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Header}>
      <Route path="main" component={Main}/>
    </Route>
  </Router>, 
  document.querySelector('.app')
);

Answer 1

[Mikhail Osher]

Тут описывается общий подход к данному вопросу.
Но он применим в академических проектах или при крохотных приложениях.

В реальности надо использовать dataflow пакеты. Прошу любить и жаловать - Redux.

Answer 2

[Artcl]

Можно посмотреть в сторону:
https://reacttraining.com/react-router/#context.router
https://reacttraining.com/react-router/#history

Answer 3

[Frozen Coder]

Так заиспользуйте redux и бросайте в Main action, а в Header смотрите за изменением нужного вам поля в store. Я, конечно, не спец по react, но через роутер никто ничо не передает между компонентами. Это если компоненты не в разных ветках дерева, а если один родитель другого, то можно написать метод изменения state в родительском компоненте, передать его через props в дочерний и вызывать этот метот в дочернем, когда вам надо. Как-то так.