Suspense only triggers one time when using react router 7, but works as expected in 6

[AnderssonPeter]

I'm using React Router as a...

library

Reproduction

• Checkout repo

• run:

  • npm install
  • npm dev
  • Open browser to http://localhost:5174/

• It shows

  • PreLayout loading... for 5 seconds

• Click Random number it shows MainContent loading... for 3 seconds

• Click Random char it should show MainContent loading... for 3 seconds but it dosen't, but after 3 seconds the content is changed

• Open package.json and change "react-router-dom": "^7.1.3" to "react-router-dom": "^6.28.2"

• run npm install

• Run the tests above again, now it shows MainContent loading... every time you click a link instead of only doing it the first time...

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Memory: 3.48 GB / 31.64 GB
  Binaries:
    Node: 22.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (132.0.2957.115)
    Internet Explorer: 11.0.26100.1882
    Chrome: 132.0.6834.111
  npmPackages:
    vite: ^6.0.5 => 6.0.11
    react-router-dom: 7.1.3

Used Package Manager

npm

Expected Behavior

The suspense should trigger every time a TenStackQuery runs using useSuspenseQuery

Actual Behavior

It only does it the first time

[andrecarrblad]

I tested downgrading to v6, and it works as expected. But if I add:

future={{
    v7_startTransition: true,
  }}

to the RouterProvider, I get the same problem. The solution is to add location.key in the Suspense key.

However, adding location.key introduces a new problem: it causes a full remount of all components inside the Suspense boundary whenever the location.key changes.