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.