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