RouterProvider rerender issue

[Stryzhevskyi]

I'm using React Router as a...

library

Reproduction

React Router 6.29.0 - rerender issue (StackBlitz)

1. Open the link.
2. Wait until all dependencies are installed and the test is completed.
3. Observe the error in the terminal.

The same behaviour is observed in browser. Example

1. Open the link.
2. Click Update top state.
3. State outside the RouterProvider is updated, but property in the component is initial

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
  npmPackages:
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-router-dom: 6.29.0 => 6.29.0 
    webpack: ^5.38.1 => 5.72.0 
    webpack-cli: ^4.7.2 => 4.9.2 
    webpack-dev-server: ^3.11.2 => 3.11.3 

Used Package Manager

npm

Expected Behavior

React Router 6.28.2 (StackBlitz)

I assume that the behavior in version 6.28.2 is expected.

It is expected that after the RouterProvider is rerendered, components that match the current state will also rerender and receive new props.

The same behavior is observed in the browser. Example

1. Open the link.
2. Click Update top state.
3. State outside the RouterProvider and property in the component is updated.

Actual Behavior

In version 6.29.0, after the RouterProvider is rerendered, the component does not receive new props.

It seems, this change was introduced in POC optimization for matchRoutes PR.

[timdorr]

create*Router isn't intended to be recreated once the React render cycle has begun. You should be creating your router instance outside of a React component at the global level. If you want data to be pushed through the tree, you should make your own context instance to update it.

[Stryzhevskyi]

@timdorr, my main issue is with unit tests. In order to test components that use React Router's hooks (like useMatches), I have to wrap the component with a RouterProvider. After update to 6.29.0 it is no longer possible to rerender the component which is being tested.

If I'm missing another way to test such components, please provide a link to an example or documentation.