Fog of War: Don't discover links/forms with reloadDocument (#9686)

.changeset/dull-oranges-carry.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Fog of War: Don't prefetch links/forms with `reloadDocument`

integration/fog-of-war-test.ts

@@ -367,6 +367,57 @@ test.describe("Fog of War", () => {
     ).toEqual(["root", "routes/_index", "routes/a", "routes/a.b"]);
   });
 
+  test("does not prefetch links with reloadDocument", async ({ page }) => {
+    let fixture = await createFixture({
+      config: {
+        future: {
+          unstable_fogOfWar: true,
+        },
+      },
+      files: {
+        ...getFiles(),
+        "app/routes/a.tsx": js`
+          import { Link, Outlet, useLoaderData } from "@remix-run/react";
+
+          export function loader({ request }) {
+            return { message: "A LOADER" };
+          }
+
+          export default function Index() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1 id="a">A: {data.message}</h1>
+                <Link to="/a/b" reloadDocument>/a/b</Link>
+                <Outlet/>
+              </>
+            )
+          }
+        `,
+      },
+    });
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    await app.goto("/", true);
+    expect(
+      await page.evaluate(() =>
+        Object.keys((window as any).__remixManifest.routes)
+      )
+    ).toEqual(["root", "routes/_index", "routes/a"]);
+
+    await app.clickLink("/a");
+    await page.waitForSelector("#a");
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    // /a/b is not discovered yet even thought it's rendered
+    expect(
+      await page.evaluate(() =>
+        Object.keys((window as any).__remixManifest.routes)
+      )
+    ).toEqual(["root", "routes/_index", "routes/a"]);
+  });
+
   test("prefetches initially rendered forms", async ({ page }) => {
     let fixture = await createFixture({
       config: {

packages/remix-react/components.tsx

@@ -200,6 +200,16 @@ function usePrefetchBehavior<T extends HTMLAnchorElement>(
 
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 
+function getDiscoverAttr(
+  discover: DiscoverBehavior,
+  isAbsolute: boolean,
+  reloadDocument: boolean | undefined
+) {
+  return discover === "render" && !isAbsolute && !reloadDocument
+    ? "true"
+    : undefined;
+}
+
 /**
  * A special kind of `<Link>` that knows whether it is "active".
  *
@@ -222,9 +232,11 @@ let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
           {...prefetchHandlers}
           ref={mergeRefs(forwardedRef, ref)}
           to={to}
-          data-discover={
-            !isAbsolute && discover === "render" ? "true" : undefined
-          }
+          data-discover={getDiscoverAttr(
+            discover,
+            isAbsolute,
+            props.reloadDocument
+          )}
         />
         {shouldPrefetch && !isAbsolute ? (
           <PrefetchPageLinks page={href} />
@@ -259,9 +271,11 @@ let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
           {...prefetchHandlers}
           ref={mergeRefs(forwardedRef, ref)}
           to={to}
-          data-discover={
-            !isAbsolute && discover === "render" ? "true" : undefined
-          }
+          data-discover={getDiscoverAttr(
+            discover,
+            isAbsolute,
+            props.reloadDocument
+          )}
         />
         {shouldPrefetch && !isAbsolute ? (
           <PrefetchPageLinks page={href} />
@@ -290,9 +304,11 @@ let Form = React.forwardRef<HTMLFormElement, RemixFormProps>(
     return (
       <RouterForm
         {...props}
-        data-discover={
-          !isAbsolute && discover === "render" ? "true" : undefined
-        }
+        data-discover={getDiscoverAttr(
+          discover,
+          isAbsolute,
+          props.reloadDocument
+        )}
       />
     );
   }