Fog of war in React Router v7 is causing me problems with client-side useNavigate?

[scottdickerson]

I have a usecase where I have a main /account url. For non-mobile users (breakpoints measured client side) I need to redirect them to /account/details when that page initially renders and the client side code hydrates.

  const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true })

  useEffect(() => {
    if (!isMobile) navigate(`${clientPortalRoot}/details`, { replace: true })
  }, [clientPortalRoot, isMobile, navigate])
  return null

I see the navigate attempt to load /account/details but I get an error message in the console that says " Route /account/details does not exist"

If I manually reload the /account/details page it works.

This client-side navigate worked previously in Remix 2.x before my upgrade to React Router v7.

My assumption is that the Fog of War has caused the /account/details to be removed from the manifest until it detects that a user is about to visit that page.

I debugged into the react-router code and see that the route matches only contains my / and /account route while it's attempting to programmatically navigate to that /account/details so it fails navigation with that missing route error.

I also saw the documentation on using <Link prefetch="render" to="/account/details"> to load the new page in the background. That actually does work if I delay the redirect until after that prefetch triggers. I think this is dynamically adding the page into the manifest behind the scenes.

I see that there's this patchRoutesOnNavigation option where I could possibly catch the missing route and serve it manually. However I'm using the <ServerRouter> and <HydrateRouter> in my entry.server.tsx and entry.client.tsx and I can't figure out how to use the patchRoutesOnNavigation override.

Is there a way to configure my routes.ts to tell React-router to exclude the /account/details route from the Fog of war manifest stripping? If not what's the correct way to use patchRoutesOnNavigation with <ServerRouter and <HydrateRouter.

Thanks!

[scottdickerson]

BTW rendering the <Navigate component also has the same problem.