Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 17, 2025
+101 −1
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5be7351
Ensure ancestor pathless/index routes are loaded via manifest requests
brophdawg11 Mar 11, 2025
e490f63
Merge branch 'dev' into brophdawg11/fow-index-routes
brophdawg11 Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/plenty-jeans-lie.md
View file
Open in desktop
Original file line number Diff 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
74 changes: 74 additions & 0 deletions integration/fog-of-war-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
});
23 changes: 22 additions & 1 deletion packages/react-router/lib/server-runtime/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Loading