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

Posted 2023-02-21

【中文标题】React Router this.context.router.push 不会重新挂载组件

【英文标题】：React Router this.context.router.push does not remount the component

【发布时间】：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/…

示例

【参考方案1】：

传入不同的组件。

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