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