After defining routes with patchRoutes, trying to navigate to URL containing #hash is throwing an error

[Westman18]

I'm using React Router as a...

library

Reproduction

1. Go to router-fragment-navigation-error on Stackblitz
2. Wait for the app to start
3. Manually add .../mock route to the URL
4. Refresh the page and observe the navigation working as expected.
5. Manually add any fragment (hash) to the working URL (.../mock#test).
6. Refresh the page and observe the 404 Not Found react router error.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 8.33 GB / 31.67 GB
  Binaries:
    Node: 20.18.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (129.0.2792.52)
    Internet Explorer: 11.0.19041.4355

Used Package Manager

npm

Expected Behavior

Navigating to a route containing hash should not throw 'no route matches url' error.
(routes are already defined at this point with .patchRoutes())

Actual Behavior

After the routes are defined with .patchRoutes(), navigating to a route containing hash (#) is throwing us an error:

The same navigation, but to route without hash is working correctly in this scenario.

[brophdawg11]

Performing a GET navigation is currently subject to some short circuit optimizations because it assumes that there haven't been any mutations that would impact the current state of things. I think there's 2 ways to work around this issue you're currently running into:

Option 1 - Is there a reason you can't do this via patchRoutesOnNavogation?

const router = createBrowserRouter(routes, {
  patchRoutesOnNavigation({ path, patch }) { 
    let routesDefinitions = await loadRouteDefinitionsHoweverYouWant(path);
    patch(null, routesDefinitions);
  },
});

Doing it there let's the router load them during initial hydration to avoid the current "hydrate a 404, then patch in a new route and navigate" flow.

Option 2 - If you use router.revalidate() after you call router.patchRoutes, that should tell the router that it needs to force a full reload which will pick up on the new routes