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

[scottdickerson]

I'm using React Router as a...

library

Reproduction

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.

Inside the component:

return !isMobile ? <Navigate to="/account/details"/> : <AccountHome/>

Inside a client loader, same problem

    return !isMobile ? redirect('/account/details')

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.

If I do a 302 redirect from the server loader it works, but I can't determine the mobile or non-mobile from within that code.

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.

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 156.56 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/Documents/GitHub/phillips-public-remix/node_modules/.bin/npm
    pnpm: 9.15.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 131.1.73.97
    Chrome: 133.0.6943.142
    Safari: 18.3
  npmPackages:
    @react-router/dev: ^7.0.0 => 7.1.3 
    @react-router/express: ^7.0.0 => 7.1.3 
    @react-router/node: ^7.0.0 => 7.1.3 
    @react-router/remix-routes-option-adapter: ^7.1.3 => 7.1.3 
    react-router: ^7.0.0 => 7.1.3 
    vite: ^5.4.14 => 5.4.14

Used Package Manager

npm

Expected Behavior

I would expect the React-Rotuer client-side redirecting libraries to work with the manifest check even if the path I'm redirecting to had not yet been loaded by fog of war

Actual Behavior

I get this error with either a <Navigate or useNavigate from the initial render of this page.

hook.js:600 No routes matched location "/account/details"  Error Component Stack
    at DataRoutes (chunk-SYFQ2XB5.mjs:4902:3)
    at Router (chunk-SYFQ2XB5.mjs:4987:13)
    at RouterProvider (chunk-SYFQ2XB5.mjs:4732:3)
    at RouterProvider2 (<anonymous>)
    at RemixErrorBoundary (chunk-SYFQ2XB5.mjs:5931:5)
    at HydratedRouter (dom-export.mjs:147:46)
    at DefaultPropsProvider (DefaultPropsProvider.js:9:3)

[brophdawg11]

I think you may be running into a redirect loop if you are not conditionally redirecting - since the account component will re-render on /account/details and cause a new redirect if you aren't defensive:

export default function Comp() {
  let location = useLocation();
  let navigate = useNavigate();

  if (!isMobile && location.pathname === '/account') { // 👈 This is important!
    return <Navigate to="/account/details" />
  }

  return <AccountHome/>
}

The same scenario would apply in a clientLoader:

export function clientLoader({ request }: Route.LoaderArgs) {
  if (new URL(request.url).pathname === '/account') {
    return redirect('/account/details');
  }
}

https://stackblitz.com/edit/github-xf15jzce?file=app%2Froutes%2Faccount.tsx

[brophdawg11]

Closing due to no response - happy to re-open if the above does not solve the issue.

[scottdickerson]

@brophdawg11 thanks for looking into this, unfortunately that didn't work for me. Doing the <Navigate always gives the No routes matched location error.

Here's the code

[scottdickerson]

this seems to be some sort of race condition, because if I start at /account on a mobile breakpoint, then extend to the wider breakpoint, the /account/details Navigate does work and it finds the route successfully. Only when the Navigate fires on initial load does it fail to find the /account/details route

Screen.Recording.2025-04-15.at.3.06.59.PM.mov

[scottdickerson]

I found this message in my server log, maybe this is the root cause?
<Navigate> must not be used on the initial render in a <StaticRouter>. This is a no-op, but you should modify your code so the <Navigate> is only ever rendered in response to some user interaction or state change.

[scottdickerson]

but since the loader function can do this 302 successfully I worked around with this code

export const loader = ({ request }: LoaderFunctionArgs) => {
  if (request.url.includes('?redirect')) {
    return new Response(null, {
      status: 302,
      headers: { Location: '/account/details' },
    });
  }
  return null;
};

const AccountMenu = () => {
  const fetcher = usePhillipsFetcher();

  /**
   * Workaround for this issue https://github.com/remix-run/react-router/issues/13149 and instead redirect from the server loader
   */
  useEffect(() => {
    if (window.matchMedia('(min-width: 768px)').matches) {
      void fetcher.load('./?redirect');
    }
  }, [fetcher]);

  return (
    <MyAccountWrapper>
      <SSRMediaQuery.Media lessThan="md">
        <AccountNav />
      </SSRMediaQuery.Media>
      <SSRMediaQuery.Media greaterThanOrEqual="md">
        <Grid>
          <GridItem md={2} lg={2} align={GridItemAlign.left}>
            <AccountNav />
          </GridItem>
          <GridItem md={4} lg={10}>
            <Loader />
          </GridItem>
        </Grid>
      </SSRMediaQuery.Media>
    </MyAccountWrapper>
  );
};

export default AccountMenu;

[brophdawg11]

Hm, if you can provide a small reproduction of the issue I can dig in deeper to see if it's an issue with the fog of war logic

[scottdickerson]

I couldn't reproduce it in the latest react-router version and upgrading fixed it! Thanks @brophdawg11