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?

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).

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.

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.