10

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.

The diff between two states, showing how key changes alongside a pathname.

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

The diff between two states, showing how only the key changes.

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?

Dheeraj Vepakomma
  • 26,870
  • 17
  • 81
  • 104
Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91

3 Answers3

14

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

Johannes Reuter
  • 3,501
  • 19
  • 20
3

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.

bad_coder
  • 11,289
  • 20
  • 44
  • 72
Atmo101
  • 31
  • 3
  • 1
    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. – igorsantos07 Sep 07 '21 at 18:37
  • I opened an [issue/discussion](https://github.com/remix-run/react-router/discussions/8025) with the package to follow up on this problem - it seems 5.2.1 solves it, but not for me. – igorsantos07 Sep 07 '21 at 21:42
1

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.

Bharat
  • 386
  • 5
  • 20