Как изменить состояние на основе изменения маршрута в React-Router?

Question

Я пытаюсь выяснить, как изменить состояние панели инструментов при нажатии на новый маршрут.Это новое изменение маршрута должно обновить компонент TopMenu.

---

Это код Dashboard

class Dashboard extends Component {
  constructor (props) {
    super(props)
    this.state = {
        selectedMenuItem: 'Now'
    }
  }

render () {
return (
  <Router>
    <div id='dashboard-container'>
      <LeftMenu/>

      <div className='column'>
        <TopMenu selectedMenuItem={this.state.selectedMenuItem} />

        <div id='content-container'>
          <div>
            <Switch>
              <Route exact path='/' component={Now} />
              <Route exact path='/surveys' component={Surveys} />
              <Route exact path='/my-questions' />
              <Route exact path='/feedback' />
              <Route exact path='/logout' />
              <Route render={function () {
                            return <p>Not Found</p>
                        }} />
            </Switch>
          </div>
        </div>
      </div>
        </div>

  </Router>

)}}

---

Это код TopMenu

class TopMenu extends Component {
  render () {
    return (
       <h3>{this.props.selectedMenuItem}</h3>
    )
  }
}

Как прослушатьизмените React Router таким образом, чтобы я мог изменить переменную состояния selectedMenuItem на панели инструментов и передать ее в TopMenu.

Спасибо!

Answer 1

У меня была такая же проблема, и я решил ее с помощью withRouter, который построен для интегрированного маршрутизатора с Redux, единственное, что вам нужно сделать, это обернуть connect с withRouter.Для получения дополнительной информации прочитайте Редукционный документ интеграции

Answer 2

Предполагая, что вы используете версию 4, проверьте использование match в React Router 4: https://reacttraining.com/react-router/web/api/match

match будет включать всю информацию о пути, которая понадобится вам для обработки изменений маршрута.Вы можете получить к нему доступ, позвонив this.props.match в компоненте страницы верхнего уровня.