React force re-mount component on route change

Viewed 11642

How can I re-mount a component on route change when using the same component for both the routes?

Here is my code.

routes.jsx

<Router history={browserHistory}>
  <Route path="/" component={Home} />
  <Route path="/foo/:fooId" component={Home} />
</Router>

I have a conditional check in Home component for fooId, which renders the JSX accordingly.

<Link to="/foo/1234">fooKey</Link>

At the moment, when clicked on fooKey the route changes and the render function in Home component is re-triggered but is not mounted again.

I went through other answers which mentioned componentWillReceiveProps, but I have a lot of config in the constructor and I don't want to be moving all of that config to componentWillReceiveProps.

Please comment if more information is needed.

3 Answers
Related