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

IT技术 javascript reactjs react-router
2021-05-20 22:49:56

我们有一个点击处理程序,它使用 react router 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 的最佳案例实践是什么?

1个回答

传入不同的组件。

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