[Bug]: Resetting Suspense boundaries on navigation not work

[GuichiZhao]

Summary

Resetting Suspense boundaries on navigation not work

Page

https://react.dev/reference/react/Suspense

Details

I come up with an example as the documentation says:

However, now imagine you’re navigating between two different user profiles. In that case, it makes sense to show the fallback. For example, one user’s timeline is different content from another user’s timeline. By specifying a key, you ensure that React treats different users’ profiles as different components, and resets the Suspense boundaries during navigation. Suspense-integrated routers should do this automatically.

https://codesandbox.io/p/sandbox/react-dev-forked-4fszvr?file=%2Fsrc%2FApp.js

However, key do not work as expect, i.e. I did not see a loading indicator

[gaearon]

You need <Suspense> itself to be within the thing you're keying (or have the key) to treat it as a "new" boundary.

[GuichiZhao]

You need <Suspense> itself to be within the thing you're keying (or have the key) to treat it as a "new" boundary.

It makes sense, but it's hard to come to that conclusion from the documentation below @gaearon

However, if you navigate to a route with different parameters, you might want to tell React it is different content. You can express this with a key:

[gaearon]

Sure, ideally this page would just have a sandbox for that. Happy to review a PR adding one.