RouterProvider state will not re-initialize after router is changed.

[overzh]

I'm using React Router as a...

library

Reproduction

I have a dynamic router which changes depending on a variable.
Initially, the router will render <UnknownRegion /> because the region is undefined.
Once the param is updated, the region will be updated synchronously.
At this time, the router is expected to render <ShowRegion />.

For more detail and demo:

1. Go to SandBox Demo
2. Add any region segment at the end of the URL. (like: sqgcvj.csb.app/US)

System Info

"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router": "7.1.5"

Used Package Manager

npm

Expected Behavior

Render <ShowRegion /> which shows "Selected region: US."

Actual Behavior

Render <UnknownRegion /> which shows "Please select a region."

[timdorr]

You should not create your router instance inside of a React component. You cannot have multiple instances because of how we hook into the global navigation and location state for the browser.

I believe you should handle this via a lazy route load.