ルータの履歴をonClickのコンポーネントに渡す

Question

ReactアプリケーションをContainerとPresentationコンポーネントで少しきれいにしようとしています。私は反応し、ルータの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

どのように私はこの問題を解決することができますか？コンポーネントの小道具を経由してルータオブジェクト（match、historyとlocation）にアクセスするには

<Jobs jobs={jobs}/> 

Answer 1

、いずれかの成分は、ルートを経由してレンダリングする必要があるか、それがwithRouter higher-で包む必要があります：私は、次のように別の小道具を渡す必要がありますオーダーコンポーネント。

Jobsコンポーネントが、このような方法でRoute経由で直接レンダリングされているかどうかを確認します。あなたはそれをエクスポートする前に、次のように

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

それはそうではないのです、とジョブズコンポーネントが別のコンポーネントのrenderメソッド内JSXでレンダリングされている場合は、withRouter高次の成分とそれを包みます。

export default withRouter(Jobs); 

これにより、ジョブコンポーネントがすべてのルータの小道具に確実にアクセスできるようになります。

さらに、this.props.historyの代わりにprops.historyを使用してください。機能コンポーネントです。