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

Question

尝试使用Container和Presentation组件清理我的React应用程序.我正在使用react-router v4,之前我使用了onClick事件job来显示特定的作业页面:

<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

我该如何解决这个问题？我应该通过下面的另一个道具:

<Jobs jobs={jobs}/>

Answer 1

要通过组件的props 访问路由器对象(match,history和location),组件必须通过Route呈现,或者它应该包含withRouter更高阶的组件.

检查您的Jobs组件是否通过Route直接呈现,如下所示.

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

如果不是这种情况,并且使用JSX在另一个组件的render方法中呈现Jobs组件,则withRouter在导出之前使用高阶组件将其包装如下.

export default withRouter(Jobs);

这将确保Jobs组件可以访问所有路由器道具.

此外,请确保您使用props.history而不是this.props.history从现在起它的功能组件.