反应路由器4：在onClick链接组件更新状态答案

【问题标题】：React router4: update state at onClick Link component反应路由器4：在onClick链接组件更新状态
【发布时间】：2019-07-07 12:19:06
【问题描述】：

我有一个 Route 组件，它将根据当前 url 呈现一行表格，问题是我无法使用我放在 Link 组件上的 onClick 更新状态，url 已更改但状态仍然相同，所以渲染的行内容还是一样的，看下面这段代码：

      <Route
        exact
        path={'/dashboard/:page'}
        render={() => (
          this.state.data &&
            data.map((data, index) =>
            <Row key={index}>
               <Col md="1" xl="1">{index + 1}</Col>
               <Col md="3" xl="4">{data.job_title}</Col>
               <Col md="2" xl="3">{data.city}</Col>
               <Col md="2" xl="2">{data.job_status}</Col>
               <Col md="2" xl="2"><a href="">{data.inbox.length > 1 ? data.inbox + ' Candidates' : data.inbox + ' Candidate'}</a></Col>
            </Row>
          )
        )}
      />
      <Route
        exact
        path={'/dashboard'}
        render={() => (
          this.state.data &&
            data.map((data, index) =>
            <Row key={index}>
               <Col md="1" xl="1">{index + 1}</Col>
               <Col md="3" xl="4">{data.job_title}</Col>
               <Col md="2" xl="3">{data.city}</Col>
               <Col md="2" xl="2">{data.job_status}</Col>
               <Col md="2" xl="2"><a href="">{data.inbox.length > 1 ? data.inbox + ' Candidates' : data.inbox + ' Candidate'}</a></Col>
            </Row>
          )
        )}
      />
    </div>
    <div style={{display: 'flex', justifyContent: 'center'}}>
      <Link onClick={() => {this.setState({currentPage: this.state.currentPage + 1, data: dataMock.data[this.state.currentPage + 1]})}} to="/dashboard/1">
        <Button style={{margin: '20px'}}>Page + 1</Button>
      </Link>
      <Link onClick={() => {this.setState({currentPage: this.state.currentPage - 1, data: dataMock.data[this.state.currentPage - 1]})}} to='/dashboard/2'>
        <Button style={{margin: '20px'}}>Page - 1</Button>
      </Link>
    </div>

问题是如何用新状态更新状态？似乎状态没有更新，我做错了吗？我对我之前找到的这个解决方案有点困惑，这是链接：React to url change within component with React Router 4?

【问题讨论】：

标签： javascript reactjs react-router-v4 reactstrap

【解决方案1】：

如果这是一个好的做法，我不相信。但更简单的解决方法是给按钮添加点击事件，然后onClick，做setState，对setState的回调this.props.history.push('Route')

例如，

takeUserToPage = () => {
  this.setState({currentPage: this.state.currentPage + 1, data: 
   dataMock.data[this.state.currentPage + 1]}, () => {
   this.props.history.push('Route')
  });
}

//inside your return
 <Button style={{margin: '20px'}} onClick={this.takeUserToPage}>Page + 1</Button>

【讨论】：