404 route handling does not work on page reload

[jrenjilian]

I'm using React Router as a...

library

Reproduction

Repository

Core reproduction code:

const router = createBrowserRouter([
  {
    path: "",
    element: <Link to="/bad-route">bad route</Link>,
    errorElement: <p>404</p>,
    loader: () => ({ data: "data" }),
  },
]);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

System Info

System:
    OS: macOS 15.3
    CPU: (12) arm64 Apple M2 Pro
    Memory: 89.75 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.9.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 133.0.6943.53
    Safari: 18.3
    Safari Technology Preview: 18.2
  npmPackages:
    react-router: ^7.1.5 => 7.1.5 
    vite: ^6.1.0 => 6.1.0

Used Package Manager

npm

Expected Behavior

When loading a route that doesn't exist in the route definition (logging No routes matched location..., I expect that the errorElement or ErrorBoundary is rendered

1. when doing a client-side navigation to the not found route
2. when reloading the page at the not found route

Actual Behavior

The errorElement/ErrorBoundary is rendered when doing a client-side navigation but not when reloading the page. Note that this only seems to break when the route has a loader defined — without it, both expectations are met.

This means that a user who mistypes a route or uses an outdated bookmark will get a white screen instead of 404 UI.

This worked in 7.1.3 but is broken in 7.1.4 onwards.