React Router this.context.router.push不会重新安装组件 [英] React Router this.context.router.push does not remount the component

问题描述

我们有一个点击处理程序，它使用react router 2.0 this.context.router.push（）更新url。见下文：

We have a click handler that updates the url using the react router 2.0 this.context.router.push(). See below:

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

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

Our goal is to fetch the new data based on the "sl" query string, but our componentWillMount() method is not being called because we are updating the url to the same path --- just a different query string. Instead the update lifecycle methods are being called. Our current approach is to call the action creators to fetch the data directly in the click handler. However, this seems redundant and hacky because we have already updated the url. Ideally, the component would get unmounted and remounted.

以下是嵌套路由：

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

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

What is the best case practice around navigating to the current url with a different query string?

推荐答案

传入另一个组件。

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

这篇关于React Router this.context.router.push不会重新安装组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！