Ensure ancestor pathless/index routes are loaded via manifest requests (#13203)

brophdawg11 · web-flow · commit 5de9a21f5d25 · 2025-03-17T11:14:57.000-04:00
diff --git a/.changeset/plenty-jeans-lie.md b/.changeset/plenty-jeans-lie.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Load ancestor pathless/index routes in lazy route discovery for upwards non-eager-discoery routing
diff --git a/integration/fog-of-war-test.ts b/integration/fog-of-war-test.ts
@@ -1328,4 +1328,78 @@ test.describe("Fog of War", () => {
       )
     ).toEqual(["root", "routes/a", "routes/_index", "routes/a.b"]);
   });
+
+  test("loads ancestor index routes on navigations", async ({ page }) => {
+    let fixture = await createFixture({
+      files: {
+        ...getFiles(),
+        "app/root.tsx": js`
+          import * as React from "react";
+          import { Link, Links, Meta, Outlet, Scripts } from "react-router";
+          export default function Root() {
+            let [showLink, setShowLink] = React.useState(false);
+            return (
+              <html lang="en">
+                <head>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <Link to="/" discover="none">Home</Link><br/>
+                  <Link to="/a" discover="none">/a</Link><br/>
+                  <Link to="/a/b" discover="none">/a/b</Link><br/>
+                  <Link to="/a/b/c" discover="none">/a/b/c</Link><br/>
+                  <Outlet />
+                  <Scripts />
+                </body>
+              </html>
+            );
+          }
+        `,
+        "app/routes/a._index.tsx": js`
+          export default function Index() {
+            return <h3 id="a-index">A INDEX</h3>;
+          }
+        `,
+        "app/routes/a.b._index.tsx": js`
+          export default function Index() {
+            return <h3 id="b-index">B INDEX</h3>;
+          }
+        `,
+      },
+    });
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    await app.goto("/", true);
+    expect(
+      await page.evaluate(() =>
+        Object.keys((window as any).__reactRouterManifest.routes)
+      )
+    ).toEqual(["root", "routes/_index"]);
+
+    await app.clickLink("/a/b/c");
+    await page.waitForSelector("#c");
+
+    // /a/b is not discovered yet even thought it's rendered
+    expect(
+      await page.evaluate(() =>
+        Object.keys((window as any).__reactRouterManifest.routes)
+      )
+    ).toEqual([
+      "root",
+      "routes/_index",
+      "routes/a",
+      "routes/a._index",
+      "routes/a.b",
+      "routes/a.b._index",
+      "routes/a.b.c",
+    ]);
+
+    await app.clickLink("/a/b");
+    await page.waitForSelector("#b-index");
+
+    await app.clickLink("/a");
+    await page.waitForSelector("#a-index");
+  });
 });
diff --git a/packages/react-router/lib/server-runtime/server.ts b/packages/react-router/lib/server-runtime/server.ts
@@ -318,7 +318,28 @@ async function handleManifestRequest(
   let patches: Record<string, EntryRoute> = {};
 
   if (url.searchParams.has("p")) {
-    for (let path of url.searchParams.getAll("p")) {
+    let paths = new Set<string>();
+
+    // In addition to responding with the patches for the requested paths, we
+    // need to include patches for each partial path so that we pick up any
+    // pathless/index routes below ancestor segments.  So if we
+    // get a request for `/parent/child`, we need to look for a match on `/parent`
+    // so that if a `parent._index` route exists we return it so it's available
+    // for client side matching if the user routes back up to `/parent`.
+    // This is the same thing we do on initial load in <Scripts> via
+    // `getPartialManifest()`
+    url.searchParams.getAll("p").forEach((path) => {
+      if (!path.startsWith("/")) {
+        path = `/${path}`;
+      }
+      let segments = path.split("/").slice(1);
+      segments.forEach((_, i) => {
+        let partialPath = segments.slice(0, i + 1).join("/");
+        paths.add(`/${partialPath}`);
+      });
+    });
+
+    for (let path of paths) {
       let matches = matchServerRoutes(routes, path, build.basename);
       if (matches) {
         for (let match of matches) {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +Load ancestor pathless/index routes in lazy route discovery for upwards non-eager-discoery routing