SPA mode: Page gets rendered even if we redirect in clientLoader

[aron51]

I'm using React Router as a...

framework

Reproduction

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

Using new version v7.2.0, the page gets rendered even if we return or throw a redirect in the clientLoader. See that there is an error in the console as the Home page tries to read the loader data.

This was working in previous versions.

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 85.89 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.7.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 10.1.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.38 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 133.0.6943.99
    Safari: 18.0.1

Used Package Manager

npm

Expected Behavior

If a redirect is returned/thrown in the clientLoader the page doesn't get rendered.

Actual Behavior

If a redirect is returned/thrown in the clientLoader the page gets rendered.

[itsthekeming]

Seeing this as well with 7.2.0 with SPA mode. It's working as expected on 7.1.5. We redirect from our index route if the user is authenticated and we're getting a flash of that route before it redirects, as though the app isn't waiting for the index's clientLoader to finish before rendering.

[BjorneOma]

I am also facing the same issue. This is causing a bug in my project that makes me unable to upgrade to react-router. I am seeing this issue for both 7.1.0 and 7.2.0 (currently on 7.0.0 in production).

I also made a minimal reproducible example here: https://github.com/BjorneOma/client-loader-bug-example

[akamfoad]

We're also facing this problem in our apps, we use ssr:false with no prerender.

When navigating to a route, if the clientLoader of that route return/throw a redirect, the Component of current route is rendered until the clientLoader of the next (redirected to) route returned.

// app/routes/_index.tsx

export const clientLoader = ()=>{
  console.log("_index clientLoader")
  throw redirect("/some/other/route")
}

export default function Index(){
  console.log("Index Component")
  return null
}

// app/routes/some.other.route.tsx

export const clientLoader = ()=>{
  console.log("some/other/route clientLoader")
  return null
}

export default function SomeOtherRoute(){
  console.log("SomeOtherRoute Component")
  return null
}

Expected Behavior <7.2.0

_index clientLoader
some/other/route clientLoader
SomeOtherRoute Component

Current Behavior >=7.2.0

_index clientLoader
+Index Component
some/other/route clientLoader
SomeOtherRoute Component

[akamfoad]

Fixed by #13222
Released in v7.4.0