What is the "key" which changes on every route change with connected-react-router?

Question

When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history.

Another property changes as well: router.location.key, to a new random string.

Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates.

What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which updates on very action dispatch? Why is it not a number which simply increments?

Prattle

Answer 1

connected-react-router simply stores the location object from react-router which in turn creates the location object using the history package. In the readme of history the key property is described:

Locations may also have the following properties:

location.key - A unique string representing this location (supported in createBrowserHistory and createMemoryHistory)

It is used internally (e.g. in https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js to find locations in the current history stack) and should be treated as an implementation detail of react-router. I suspect a random key instead of a incrementing sequence number was simply the easiest way to implement unique ids (you don't have to store the current sequence number).

Stagg

Answer 2

This causes unnecessary rerender of the current route, when visited once again, because props change. One way to fix that would be to use React.memo, and comparing the location.path which stays the same. But then you will have to be careful if your component receives other props, so to include them in the comparison.

Dory

Good to see someone had the exact same conclusion I had on the exact same problem I'm having. Sad to see this seems to be a common scenario and quite hard to debug, since react-router has no docs whatsoever about location.key or this re-render issue. – Pomelo

I opened an issue/discussion with the package to follow up on this problem - it seems 5.2.1 solves it, but not for me. – Pomelo

Answer 3

From the React Router Docs

Each location gets a unique key. This is useful for advanced cases like location-based scroll management, client side data caching, and more. Because each new location gets a unique key, you can build abstractions that store information in a plain object, new Map(), or even locationStorage.

Terbia