render prop remounts the component on every route change

[trassmann]

Version

4.2.0

Test Case

https://codesandbox.io/s/j2p1r0kvx5

Expected Behavior

According to the documentation here: https://reacttraining.com/react-router/web/api/Route/render-func the inline render with a render prop should not remount the component every time.

Actual Behavior

You can see from the console logs that the Test component is unmounted and mounted again for every route change.

I have been trying to find a reason for this since yesterday. But even in the simplest test case this still happens. Please excuse my lack of knowledge, if this is not a bug, please explain what is happening.

[pshrmn]

You need to wrap your <Route>s in a <Switch> to get the behavior that you are expecting. A <Switch> will only render the first matching <Route>, while your implementation renders all three.

[trassmann]

@pshrmn Thank you Paul. But then there is still this issue: https://codesandbox.io/s/ywzll8wn8j

As soon as I map the routes from an array and i add a key prop, the same faulty behaviour appears, the component is constantly remounted. If you remove the key prop in the sandbox, the faulty behaviour stops. Is there a solution for this as well?

[pshrmn]

That is just how React's reconciliation works. React compares an element's type and its key and if either of those are different, it unmounts the current component and mounts a new component.

If #5889 gets merged, you will be able to group multiple paths under the same <Route>, so that might fit your use case better.

[trassmann]

But the key does not change in this example, no?

[trassmann]

Scratch that. I misunderstood. Makes perfect sense. Thank you Paul, sorry for the useless bug report.