React Router this.context.router.push 不会重新挂载组件答案

【问题标题】：React Router this.context.router.push does not remount the componentReact Router this.context.router.push 不会重新挂载组件
【发布时间】：2016-05-14 19:09:42
【问题描述】：

我们有一个点击处理程序，它使用反应路由器 2.0 this.context.router.push() 更新 url。见下文：

selectRelatedJob(slug) {
  JobActionCreators.fetchJobPage(slug);
  JobsActionCreators.getRelatedJobs({'sl': slug});
  this.context.router.push({pathname: '/job', query: {sl: slug}});
}

我们的目标是根据“sl”查询字符串获取新数据，但没有调用我们的 componentWillMount() 方法，因为我们将 url 更新到相同的路径 --- 只是一个不同的查询字符串。相反，正在调用更新生命周期方法。我们当前的方法是调用动作创建者直接在点击处理程序中获取数据。然而，这似乎是多余的和 hacky，因为我们已经更新了 url。理想情况下，组件会被卸载并重新安装。

这里是嵌套路由：

<Route component={App}>
  <Route path="/" component={HomePage}/>
    <Route path="job" component={JobPage}/>
    <Route path="job/" component={JobPage}/>
  </Route>
</Route>

使用不同的查询字符串导航到当前 url 的最佳案例是什么？

【问题讨论】：

为什么要卸载它？您应该可以在componentWillReceiveProps() 中调用动作创建者
因此，您建议检查componentWillReceiveProps() 以确定当前和下一个查询字符串是否相等，如果不相等，则调用操作创建者？
没错！访问查询字符串github.com/rackt/react-router/blob/master/examples/query-params/…示例

标签： javascript reactjs react-router

【解决方案1】：

传入不同的组件。

<Route path="job/:id" component={JobDetailPage} />

【讨论】：