Fix manifest version mismatch reload losing query parameters and hash (#14813)

Author: brophdawg11

.changeset/warm-clouds-shine.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Preserve query parameters and hash on manifest version mismatch reload

integration/fog-of-war-test.ts

@@ -1455,6 +1455,82 @@ test.describe("Fog of War", () => {
     expect(wrongManifestRequests).toEqual([]);
   });
 
+  test("manifest version mismatch reload should preserve query parameters and hash", async ({
+    page,
+  }) => {
+    let fixture = await createFixture({
+      files: {
+        "app/routes/_index.tsx": js`
+          import { Link, useLocation } from "react-router";
+
+          export default function Index() {
+            const location = useLocation();
+            return (
+              <div>
+                <h1>Home</h1>
+                <p data-location>Location: {location.pathname + location.search + location.hash}</p>
+                <Link to="/other?token=abc123&ref=campaign#section1">Go to Other</Link>
+              </div>
+            );
+          }
+        `,
+        "app/routes/other.tsx": js`
+          import { useLocation } from "react-router";
+
+          export default function Other() {
+            const location = useLocation();
+            return (
+              <div>
+                <h1>Other Page</h1>
+                <p data-location2>Location: {location.pathname + location.search + location.hash}</p>
+              </div>
+            );
+          }
+        `,
+      },
+    });
+
+    // Trigger mismatch + hard reload when trying to patch the /other route
+    await page.route(/\/__manifest/, async (route) => {
+      if (route.request().url().includes(encodeURIComponent("/other"))) {
+        await route.fulfill({
+          status: 204,
+          headers: {
+            "X-Remix-Reload-Document": "true",
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    // Start on home page
+    await app.goto("/");
+    await page.waitForSelector("h1");
+    await expect(page.locator("[data-location]")).toHaveText("Location: /");
+
+    // Click link to /other with query params and hash
+    // This should trigger manifest fetch -> version mismatch -> hard reload
+    await app.clickLink("/other?token=abc123&ref=campaign#section1");
+
+    // Wait for the page to reload and render
+    await page.waitForSelector("[data-location2]", { timeout: 5000 });
+
+    // Query parameters and hash should be preserved after reload
+    await expect(page.locator("[data-location2]")).toHaveText(
+      "Location: /other?token=abc123&ref=campaign#section1",
+    );
+
+    // Also verify the URL in the browser
+    const currentUrl = page.url();
+    expect(currentUrl).toContain("token=abc123");
+    expect(currentUrl).toContain("ref=campaign");
+    expect(currentUrl).toContain("#section1");
+  });
+
   test.describe("routeDiscovery=initial", () => {
     test("loads full manifest on initial load", async ({ page }) => {
       let fixture = await createFixture({

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -199,6 +199,7 @@ function createHydratedRouter({
       ssrInfo.context.future.unstable_trailingSlashAwareDataRequests,
     ),
     patchRoutesOnNavigation: getPatchRoutesOnNavigationFunction(
+      () => router,
       ssrInfo.manifest,
       ssrInfo.routeModules,
       ssrInfo.context.ssr,

packages/react-router/lib/dom/ssr/fog-of-war.ts

@@ -8,6 +8,7 @@ import type { RouteModules } from "./routeModules";
 import type { EntryRoute } from "./routes";
 import { createClientRoutes } from "./routes";
 import type { ServerBuild } from "../../server-runtime/build";
+import { createPath } from "../../router/history";
 
 // Currently rendered links that may need prefetching
 const nextPaths = new Set<string>();
@@ -67,6 +68,7 @@ export function getPartialManifest(
 }
 
 export function getPatchRoutesOnNavigationFunction(
+  getRouter: () => DataRouter,
   manifest: AssetsManifest,
   routeModules: RouteModules,
   ssr: boolean,
@@ -82,9 +84,14 @@ export function getPatchRoutesOnNavigationFunction(
     if (discoveredPaths.has(path)) {
       return;
     }
+    let { state } = getRouter();
     await fetchAndApplyManifestPatches(
       [path],
-      fetcherKey ? window.location.href : path,
+      // If we're patching for a fetcher call, reload the current location
+      // Otherwise prefer any ongoing navigation location
+      fetcherKey
+        ? window.location.href
+        : createPath(state.navigation.location || state.location),
       manifest,
       routeModules,
       ssr,