Question

我试图弄清楚单击新路线时如何更改仪表板的状态。这种新的路线更改需要更新TopMenu组件。

这是仪表板的代码

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

假设您使用的是版本4，请检查React Router 4中match的使用情况：https://reacttraining.com/react-router/web/api/match

match将包含处理路由更改所需的所有路径信息。您可以通过在顶层页面组件中调用this.props.match来访问它。

Answer 2

我遇到了同样的问题，我用withRouter解决了这个问题，该问题是为与redux集成路由器而构建的，唯一要做的就是用connect包装withRouter。有关更多信息，请阅读redux integration document

如何根据React-Router中的Route change更改状态？

2 个答案: