React force re-mount component on route change

reactjs react-router

11,390

Solution 1

If you need to force remounting a Component on every routing match you could achieve it by the key property unless you're knowing what you're doing:

<Route
  exact
  path={'some path'}
  render={props => <RemountAlways key={Date.now()} {...props} />}
/>

key={Date.now()} this key property will force react to remount every time.

Note: componentWillReceiveProps is bad news in react.

Solution 2

So you're not going to want to un-mount and re-mount your component every time your query string changes. Change your routes to this:

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

Wrap your <Home /> component with the withRouter HoC provided by React Router. Once you've done that, ({ match, history, location }) will be available in the <Home /> component. In your componentWillRecieveProps lifecycle hook you can perform any logic that requires query strings on props.location.search to produce the results you desire.

11,390

kvn

❤️ for programming

Updated on May 31, 2022

Comments

kvn almost 2 years
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.
- Chris Cousins almost 7 years
  
  Forcing an unmount is an anti pattern in React. componentWillReceiveProps is the correct way to do this and your code will then match what other readers/contributors would expect.
- jered almost 7 years
  
  Agreed, there is no good way to do this and you shouldn't need to even if there was. If there is configuration or data in the constructor that needs to be mutable after instantiation, then it should be moved out of the constructor and into state.
- kvn almost 7 years
  
  Thanks for the suggestions. It'll be helpful if you can point me to more explanation on the component shouldn't be re-mounted. It is obvious that degrades the perf but is there any other reason?
- jered almost 7 years
  
  I mean, it just goes completely against how the React component lifecycle is intended to be used. It's a bit like asking "Why shouldn't I use a screwdriver instead of a hammer to pound this nail? It is obvious that it degrades the perf but is there any other reason?" :P
- kvn almost 7 years
  
  Tough analogy, I must say! However, I'm still not convinced that it is against the usage of React Component lifecycle. Re-mounting would just redo the process of mounting from scratch, which is of course a waste and I agree on that point.
- Kyle Richardson almost 7 years
  
  This is so "against the grain" when it comes to React I don't think it's worth time considering.
Kyle Richardson almost 7 years

This is not the way to handle props and state. You want a single source of truth for any piece of data. If you need a combination of state and props for your render you can perform that logic at the time of need.