Question

尝试使用Container和Presentation组件清理我的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

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

<Jobs jobs={jobs}/>

Answer 1

要通过组件的props访问路由器对象（match，history和location），组件必须通过Route呈现，或者它应该包裹{{3}高阶分量。

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

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

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

export default withRouter(Jobs);

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

另外，请确保使用props.history代替this.props.history，因为它现在是功能组件。

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

1 个答案: