reactjs - 将路由器历史记录传递给 onClick 组件

Question

尝试使用容器和演示组件来清理我的 React 应用程序。我正在使用 react-router v4，之前我对每个 job 使用了 onClick 事件来显示特定的作业页面:

<div onClick={() => this.props.history.push('/jobs/' + job.slug)}>
  //The job info
</div>

现在我在一个单独的文件中为这样的作业创建了一个愚蠢的组件:

const Jobs = (props) => (
  <div>
  {
    props.jobs.map(job =>
      <div key={job.slug} onClick(//todo)>
        <p>{job.title} at <Link to="/">{job.company}</Link></p>
      </div>
    )
  }
  </div>
)

但我无法再访问 this.props.history

如何解决这个问题？我应该在下面传递另一个 Prop 吗:

<Jobs jobs={jobs}/>

Answer 1

要通过组件的 props 访问路由器对象(match、history 和 location)，必须通过 Route 渲染组件或者它应该用 withRouter 包裹起来高阶组件。

检查您的 Jobs 组件是否是通过 Route 直接渲染的，如下所示。

<Route path="/jobs" component={Jobs} />

如果不是这种情况，并且 Jobs 组件是在另一个组件的 render 方法中使用 JSX 渲染的，则用 withRouter 包装它在导出高阶组件之前，如下所示。

export default withRouter(Jobs);

这将确保 Jobs 组件可以访问所有 router props。

此外，请确保使用 props.history 而不是 this.props.history，因为它现在是功能组件。