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

尝试使用Container和Presentation组件清理我的React应用程序。我使用反应路由器V4和我以前使用的每个job onClick事件来显示特定作业页：将路由器历史记录传递给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}/>

来源

2017-05-21 tommyd456

要经由所述部件的道具访问路由器对象（match，history和location），无论该组件具有通过路线被呈现，或者它应与withRouter higher-包裹顺序组件。

检查您的乔布斯组件是否通过类似这样的东西直接渲染。

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

如果不是这种情况，而乔布斯组件呈现与JSX另一个组件的渲染方法里面，然后用withRouter高次成分包裹它导出之前如下。

export default withRouter(Jobs);

这将确保乔布斯组件可以访问所有的路由器道具。

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

来源

2017-05-21 15:53:48

谢谢。 'Jobs'不是通过Route直接渲染的。如图所示，它是一个单独的文件中的常量。这是不是可能？ – tommyd456

你如何呈现'Jobs'？没有看这个，就不能说这个。 –

“作业”是从Container组件的render（）方法中调用的。 – tommyd456

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

回答

相关问题