Fix root loader data on initial load redirects in SPA mode (#13222)

brophdawg11 · web-flow · commit bc437079e1b0 · 2025-03-17T11:20:04.000-04:00
diff --git a/.changeset/four-ligers-search.md b/.changeset/four-ligers-search.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix root loader data on initial load redirects in SPA mode
diff --git a/integration/vite-spa-mode-test.ts b/integration/vite-spa-mode-test.ts
@@ -692,6 +692,79 @@ test.describe("SPA Mode", () => {
           expect(await page.locator("h1").textContent()).toBe("Parent: 1");
           expect(await page.locator("h2").textContent()).toBe("Child");
         });
+
+        test("does not hydrate root loaderData if there's no root loader", async ({
+          page,
+        }) => {
+          fixture = await createFixture({
+            spaMode: true,
+            files: {
+              "react-router.config.ts": reactRouterConfig({
+                ssr: false,
+                splitRouteModules,
+              }),
+              "app/root.tsx": js`
+                import {
+                  Meta,
+                  Links,
+                  Outlet,
+                  Routes,
+                  Route,
+                  Scripts,
+                  ScrollRestoration,
+                } from "react-router";
+
+                export function Layout({ children }: { children: React.ReactNode }) {
+                  return (
+                    <html>
+                      <head>
+                        <Meta />
+                        <Links />
+                      </head>
+                      <body>
+                        {children}
+                        <ScrollRestoration />
+                        <Scripts />
+                      </body>
+                    </html>
+                  );
+                }
+
+                let count = 0;
+                export function clientLoader() {
+                  return ++count;
+                }
+
+                export default function Root({ loaderData }) {
+                  return (
+                    <>
+                      <h1>{loaderData}</h1>
+                      <Outlet />
+                    </>
+                  );
+                }
+              `,
+              "app/routes/_index.tsx": js`
+                import { redirect } from 'react-router';
+                export const clientLoader = () => redirect('/target');
+                export default function() { return null; }
+              `,
+              "app/routes/target.tsx": js`
+                import { useRouteLoaderData } from 'react-router';
+                export default function Comp() {
+                  return <h2>{useRouteLoaderData('root')}</h2>;
+                }
+              `,
+            },
+          });
+          appFixture = await createAppFixture(fixture);
+
+          let app = new PlaywrightFixture(appFixture, page);
+          await app.goto("/");
+          await page.waitForSelector("h2");
+          expect(await page.locator("h1").textContent()).toBe("2");
+          expect(await page.locator("h2").textContent()).toBe("2");
+        });
       });
 
       test.describe("normal apps", () => {
diff --git a/packages/react-router/lib/dom-export/hydrated-router.tsx b/packages/react-router/lib/dom-export/hydrated-router.tsx
@@ -113,10 +113,19 @@ function createHydratedRouter({
 
   let hydrationData: HydrationState | undefined = undefined;
   let loaderData = ssrInfo.context.state.loaderData;
+  // In SPA mode we only hydrate build-time root loader data
   if (ssrInfo.context.isSpaMode) {
-    // In SPA mode we hydrate in any build-time loader data which should be
-    // limited to the root route
-    hydrationData = { loaderData };
+    if (
+      ssrInfo.manifest.routes.root?.hasLoader &&
+      loaderData &&
+      "root" in loaderData
+    ) {
+      hydrationData = {
+        loaderData: {
+          root: loaderData.root,
+        },
+      };
+    }
   } else {
     // Create a shallow clone of `loaderData` we can mutate for partial hydration.
     // When a route exports a `clientLoader` and a `HydrateFallback`, the SSR will

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +Fix root loader data on initial load redirects in SPA mode