React Router v7 library mode with `createBrowserRouter` doesn't re-render on file changes in Vite HMR

[alanko0511]

I'm using React Router as a...

library

Reproduction

https://stackblitz.com/edit/vitejs-vite-ry7qt74n?file=src%2Froutes%2FIndexPage.tsx

Change the div text in the src/routes/IndexPage.tsx file, the page doesn't re-render. However, if I downgrade the React Router package version to 7.1.3, it will re-render as expected.

I saw that the Vite HMR WebSocket receives the file changes and downloads the file correctly when I test it locally, so I believe Vite is working as expected.

System Info

System:
    OS: macOS 13.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 74.41 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 23.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.142
    Safari: 16.1
  npmPackages:
    react-router: ^7.2.0 => 7.2.0 
    vite: ^6.2.0 => 6.2.0

Used Package Manager

pnpm

Expected Behavior

The page should be re-rendered when I change an element in the demo's src/routes/IndexPage.tsx file.

Actual Behavior

The changes I made don't cause it to re-render.

[markdalgleish]

Thanks for narrowing down the version that caused the issue. Looks like this issue was introduced in this PR: #12800

Seems like it's because the app is re-rendering with a new router instance during the HMR flow, but the matches in RouterProvider's state contains stale React elements from the initial render. Prior to the PR above, the matches were being computed during render with the latest router instance.

@brophdawg11 Do you have any thoughts on how best to support HMR here?

[rothsandro]

We have the same problem but in a completely different use case. In our tests with Vitest + Testing Library we render our component that we want to test and specify a wrapper component that creates a memory router and renders the router provider. Then we call rerender(...) from testing-library to re-render our component with different props. This will create a new memory router (which is necessary because there's a new element to render). It works fine in v7.1.3 but after updating react router it's not re-rendering anymore and our tests fail.

const TestingRoutingProvider = ({ children }) => {
  const router = createMemoryRouter([
      {
        index: true,
        element: children,
      },
    ]),
  );

  return <RouterProvider router={router} />;
};

// In our test
const { rerender } = render(
  <SomeComponent value="foo" />,
  { wrapper: TestingRoutingProvider },
);

rerender(<SomeComponent value="bar" />);

[zayprom]

@alanko0511 @rothsandro Hello, I experienced same issue after migration from remix to react-router 7. I use file naming convention and awaiting "flatRoutes" helped me to solve HMR issues. Here is the code from docs:

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

export default [
  route("/", "./home.tsx"),

  ...(await flatRoutes()),
] satisfies RouteConfig;

[cschwebk]

My application is running into the exact same issue that @rothsandro outlined.

[ChristiaanScheermeijer]

I have the exact same issue as well. The component being tested is only rendered once and doesn't update when calling rerender.

const onClose = vi.fn();
const { container, rerender, debug } = renderWithRouter(<Sidebar isOpen={true} onClose={onClose} />);

expect(container.parentNode).toHaveStyle({ overflowY: 'hidden' });

rerender(<Sidebar isOpen={false} onClose={onClose} />); // this fails

expect(onClose).toHaveBeenCalled();
expect(container.parentNode).not.toHaveStyle({ overflowY: 'hidden' });

[seriousManual]

We see something similar, though not only related to testing or HMR, not introduced post v7:
#13295

[Stryzhevskyi]

I encountered the same issue as described by @rothsandro. I have filed it here (#13315) with examples that show the differences between versions 6.28.2 and 6.9.0.

@brophdawg11, could you please recommend a solution for unit tests that include a wrapper with RouterProvider?
Would it be possible to implement a test/dev flag that would disable this optimization? I seems this could fix both unit tests and HMR issues.

What I've tried so far:

1. Replacing RouterProvider with MemoryRouter and mocking hooks that require the data router. In this case, I'm encountering a lot of issues in unit tests, which seem to be related to the change in behavior.

2. Continuing to use RouterProvider but mocking Router with jest.mock and making it static. In this case, everything works (except for useBlocker, which could be addressed separately). This solution feels too hacky.

In my issue, @timdorr made a suggestion:

If you want data to be pushed through the tree, you should create your own context instance to update it.

But all required contexts are exported as UNSAFE:

import {
  createMemoryRouter,
  UNSAFE_DataRouterContext,
  UNSAFE_DataRouterStateContext,
  UNSAFE_NavigationContext,
  UNSAFE_LocationContext,
} from 'react-router-dom';

Which seems even less desirable than option 2. Additionally, I'll have to implement all values for the providers. I guess supporting these contexts would be quite difficult with each update of react-router.

I would really appreciate any help with this.

[timdorr]

https://react.dev/learn/passing-data-deeply-with-context

[rothsandro]

@timdorr I'm not sure what solution you have in mind with React Context. The only way I can think of is by using context to passing the props to the component, creating a wrapper component and rendering the context + router providers with the render() function instead of the actual component (and not relying on wrappers anymore). I didn't test the code below but I guess something like this would work - but it's much more verbose, harder to understand and doesn't really follow how tests should be written with testing library. Do you have a better solution in mind?

// Context for Component Props
const context = createContext();

// Component that renders component with props from context
const Wrapper = () => {
  const props = useContext(context);
  return <SomeComponent {...props} />
}

// Stable router
const router = createMemoryRouter(
  [
    {
      index: true,
      element: <Wrapper />,
    },
  ]),
);

// In our test
const { rerender } = render(
  <context.Provider value={{ value: "foo" }}>
    <RouterProvider router={router} />
  </context.Provider>
);

rerender(
  <context.Provider value={{ value: "bar" }}>
    <RouterProvider router={router}> />
  </context.Provider>
);

[timdorr]

I was responding to @Stryzhevskyi's specific issue, not necessarily yours. Sorry for the crossed wires here.

[Stryzhevskyi]

@timdorr, Sandro is experiencing basically the same issue as I am: React Testing Library with a wrapper around RouterProvider. The only context-related solution I could think of for this issue is something like this:

import React, { useState, createContext, createElement } from 'react';
import { createMemoryRouter, RouterProvider } from 'react-router-dom';
import { render, screen, fireEvent } from '@testing-library/react';

const futureRouter = {
  v7_relativeSplatPath: true,
  v7_fetcherPersist: true,
  v7_normalizeFormMethod: true,
  v7_partialHydration: true,
  v7_skipActionErrorRevalidation: true,
};

const futureProvider = { v7_startTransition: true };
const TestPropsContext = createContext({});

const Component = ({ param }: { param: string }) => {
  const [state, setState] = useState(0);
  return (
    <div>
      <div data-testid="state">{state}</div>
      <div data-testid="param">{param}</div>
      <button data-testid="update-state" onClick={() => setState(1)}>
        Update
      </button>
    </div>
  );
};

const Wrapper = ({ children }: { children: React.Element }) => {
  const router = createMemoryRouter(
    [
      {
        path: '*',
        element: (
          <TestPropsContext.Consumer>
            {(props) => {
              // cloneElement doesn't work for some reason
              return createElement(children.type, props);
            }}
          </TestPropsContext.Consumer>
        ),
      },
    ],
    {
      future: futureRouter,
    }
  );
  return (
    <TestPropsContext.Provider value={children.props}>
      <RouterProvider router={router} future={futureProvider} />
    </TestPropsContext.Provider>
  );
};

describe('data router rerender', function () {
  it('rerenders component with new props', () => {
    const component = render(<Component param="0" />, {
      wrapper: Wrapper,
    });

    expect(screen.getByTestId('state').textContent).toBe('0');
    expect(screen.getByTestId('param').textContent).toBe('0');
    fireEvent.click(screen.getByTestId('update-state'));
    expect(screen.getByTestId('state').textContent).toBe('1');
    component.rerender(<Component param="1" />);
    expect(screen.getByTestId('state').textContent).toBe('1');
    expect(screen.getByTestId('param').textContent).toBe('1');
  });
});

StackBlitz