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

[Westman18]

@brophdawg11

1. As far as we checked patchRoutesOnNavigation is a no-go for us, as the entire routes definition happens in app initalilizer function, (that in turn needs Router instance to execute correctly)
   We have this flow:
   initialize Router => initialize react application (router is needed as an argument, routes definitions are one of outputs) => defineRoutes (patchRoutes) => perform intial navigation

We have some other workaround in mind but we use router as part of a bigger framework that is used for multiple products and it would require a refactor on each product level.

2. I will test router.revalidate() workaround.

Thank you for looking into it and creating the fix PR!

[brophdawg11]

Another solution that occurred to me is to perform a submission navigation (can be a no-op) which will also bypass the hash short circuit logic. I'm going to close this out since I think workarounds exist and I'm not sure the approach in the linked PR is actually a valid assumption in all cases.