Handle redirects from hydrating clientLoaders (#13477)

brophdawg11 · web-flow · commit 501d554cba4b · 2025-04-28T14:44:40.000-04:00
diff --git a/.changeset/smooth-donuts-bake.md b/.changeset/smooth-donuts-bake.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Handle redirects from `clientLoader.hydrate` initial load executions
diff --git a/integration/client-data-test.ts b/integration/client-data-test.ts
@@ -909,6 +909,85 @@ test.describe("Client Data", () => {
           expect(logs).toEqual(["running parent client loader"]);
           console.error = _consoleError;
         });
+
+        test("hydrating clientLoader redirects trigger new .data requests to the server", async ({
+          page,
+        }) => {
+          appFixture = await createAppFixture(
+            await createFixture({
+              files: {
+                "react-router.config.ts": reactRouterConfig({
+                  splitRouteModules,
+                }),
+                "app/root.tsx": js`
+                  import { Outlet, Scripts } from "react-router"
+
+                  let count = 1;
+                  export function loader() {
+                    return count++;
+                  }
+
+                  export default function Root({ loaderData }) {
+                    return (
+                      <html>
+                        <head></head>
+                        <body>
+                          <main>
+                            <p id="root-data">{loaderData}</p>
+                            <Outlet />
+                          </main>
+                          <Scripts />
+                        </body>
+                      </html>
+                    );
+                  }
+                `,
+                "app/routes/parent.tsx": js`
+                  import { Outlet } from 'react-router'
+                  let count = 1;
+                  export function loader() {
+                    return count++;
+                  }
+                  export default function Component({ loaderData }) {
+                    return (
+                      <>
+                        <p id="parent-data">{loaderData}</p>
+                        <Outlet/>
+                      </>
+                    );
+                  }
+                  export function shouldRevalidate() {
+                    return false;
+                  }
+                `,
+                "app/routes/parent.a.tsx": js`
+                  import { redirect } from 'react-router'
+                  export function clientLoader() {
+                    return redirect('/parent/b');
+                  }
+                  clientLoader.hydrate = true;
+                  export default function Component({ loaderData }) {
+                    return <p>Should not see me</p>;
+                  }
+                `,
+                "app/routes/parent.b.tsx": js`
+                  export default function Component({ loaderData }) {
+                    return <p id="b">Hi!</p>;
+                  }
+                `,
+              },
+            })
+          );
+          let app = new PlaywrightFixture(appFixture, page);
+
+          await app.goto("/parent/a");
+          await page.waitForSelector("#b");
+          // Root re-runs
+          await expect(page.locator("#root-data")).toHaveText("2");
+          // But parent opted out of revalidation
+          await expect(page.locator("#parent-data")).toHaveText("1");
+          await expect(page.locator("#b")).toHaveText("Hi!");
+        });
       });
 
       test.describe("clientLoader - lazy route module", () => {
diff --git a/packages/react-router/lib/dom/ssr/single-fetch.tsx b/packages/react-router/lib/dom/ssr/single-fetch.tsx
@@ -428,14 +428,19 @@ async function singleFetchLoaderNavigationStrategy(
   await Promise.all(routeDfds.map((d) => d.promise));
 
   // We can skip the server call:
-  // - On initial hydration - only clientLoaders can pass through via `clientLoader.hydrate`
+  // - On initial hydration - only clientLoaders can pass through via
+  //   `clientLoader.hydrate`. We check the navigation state below as well
+  //   because if a clientLoader redirected we'll still be `initialized=false`
+  //   but we want to call loaders for the new location
   // - If there are no routes to fetch from the server
   //
   // One exception - if we are performing an HDR revalidation we have to call
   // the server in case a new loader has shown up that the manifest doesn't yet
   // know about
+  let isInitialLoad =
+    !router.state.initialized && router.state.navigation.state === "idle";
   if (
-    (!router.state.initialized || routesParams.size === 0) &&
+    (isInitialLoad || routesParams.size === 0) &&
     !window.__reactRouterHdrActive
   ) {
     singleFetchDfd.resolve({ routes: {} });

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +Handle redirects from `clientLoader.hydrate` initial load executions