React Router this.context.router.push does not reload the component

Question

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}}); } 

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

Here are the nested routes:

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

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

Answer 1

Transfer another component.

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