fix _root.data fetch when basename is set (#12898)

Aleuck · web-flow · commit 283fa44bc731 · 2025-02-19T13:25:04.000-05:00
diff --git a/.changeset/short-comics-fly.md b/.changeset/short-comics-fly.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix single fetch `_root.data` requests when a `basename` is used
diff --git a/contributors.yml b/contributors.yml
@@ -16,6 +16,7 @@
 - akamfoad
 - alany411
 - alberto
+- Aleuck
 - alexandernanberg
 - alexanderson1993
 - alexlbr
diff --git a/integration/single-fetch-test.ts b/integration/single-fetch-test.ts
@@ -42,9 +42,9 @@ const files = {
             <Links />
           </head>
           <body>
-            <Link to="/">Home</Link><br/>
-            <Link to="/data">Data</Link><br/>
-            <Link to="/a/b/c">/a/b/c</Link><br/>
+            <Link to="/">Go to Home</Link><br/>
+            <Link to="/data">Go to Data</Link><br/>
+            <Link to="/a/b/c">Go to /a/b/c</Link><br/>
             <Form method="post" action="/data">
               <button type="submit" name="key" value="value">
                 Submit
@@ -101,7 +101,7 @@ const files = {
       let actionData = useActionData();
       return (
         <>
-          <h1 id="heading">Data</h1>
+          <h1 id="heading">Data Route</h1>
           <p id="message">{data.message}</p>
           <p id="date">{data.date.toISOString()}</p>
           {actionData ? <p id="action-data">{actionData.key}</p> : null}
@@ -1375,6 +1375,45 @@ test.describe("single-fetch", () => {
     expect(await app.getHtml("#target")).toContain("Target");
   });
 
+  test("supports a basename", async ({ page }) => {
+    let fixture = await createFixture({
+      files: {
+        "vite.config.ts": js`
+          import { reactRouter } from "@react-router/dev/vite";
+
+          export default {
+            base: "/base/",
+            plugins: [reactRouter()]
+          }
+        `,
+        "react-router.config.ts": reactRouterConfig({
+          basename: "/base/",
+        }),
+        ...files,
+      },
+      useReactRouterServe: true,
+    });
+
+    let appFixture = await createAppFixture(fixture);
+
+    let requests: string[] = [];
+    page.on("request", (req) => {
+      let url = new URL(req.url());
+      if (url.pathname.endsWith(".data")) {
+        requests.push(url.pathname + url.search);
+      }
+    });
+
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/base/");
+    await app.clickLink("/base/data");
+    await expect(page.getByText("Data Route")).toBeVisible();
+    await app.clickLink("/base/");
+    await expect(page.getByText("Index")).toBeVisible();
+
+    expect(requests).toEqual(["/base/data.data", "/base/_root.data"]);
+  });
+
   test("processes redirects when a basename is present", async ({ page }) => {
     let fixture = await createFixture({
       files: {
diff --git a/packages/react-router/lib/dom-export/hydrated-router.tsx b/packages/react-router/lib/dom-export/hydrated-router.tsx
@@ -178,6 +178,7 @@ function createHydratedRouter(): DataRouter {
       ssrInfo.manifest,
       ssrInfo.routeModules,
       ssrInfo.context.ssr,
+      ssrInfo.context.basename,
       () => router
     ),
     patchRoutesOnNavigation: getPatchRoutesOnNavigationFunction(
diff --git a/packages/react-router/lib/dom/ssr/components.tsx b/packages/react-router/lib/dom/ssr/components.tsx
@@ -322,6 +322,7 @@ function PrefetchPageLinksImpl({
 }) {
   let location = useLocation();
   let { manifest, routeModules } = useFrameworkContext();
+  let { basename } = useDataRouterContext();
   let { loaderData, matches } = useDataRouterStateContext();
 
   let newMatchesForData = React.useMemo(
@@ -384,7 +385,7 @@ function PrefetchPageLinksImpl({
       return [];
     }
 
-    let url = singleFetchUrl(page);
+    let url = singleFetchUrl(page, basename);
     // When one or more routes have opted out, we add a _routes param to
     // limit the loaders to those that have a server loader and did not
     // opt out
@@ -400,6 +401,7 @@ function PrefetchPageLinksImpl({
 
     return [url.pathname + url.search];
   }, [
+    basename,
     loaderData,
     location,
     manifest,
diff --git a/packages/react-router/lib/dom/ssr/single-fetch.tsx b/packages/react-router/lib/dom/ssr/single-fetch.tsx
@@ -13,6 +13,7 @@ import {
   isRouteErrorResponse,
   redirect,
   data,
+  stripBasename,
 } from "../../router/utils";
 import { createRequestInit } from "./data";
 import type { AssetsManifest, EntryContext } from "./entry";
@@ -135,12 +136,13 @@ export function getSingleFetchDataStrategy(
   manifest: AssetsManifest,
   routeModules: RouteModules,
   ssr: boolean,
+  basename: string | undefined,
   getRouter: () => DataRouter
 ): DataStrategyFunction {
   return async ({ request, matches, fetcherKey }) => {
     // Actions are simple and behave the same for navigations and fetchers
     if (request.method !== "GET") {
-      return singleFetchActionStrategy(request, matches);
+      return singleFetchActionStrategy(request, matches, basename);
     }
 
     if (!ssr) {
@@ -186,7 +188,7 @@ export function getSingleFetchDataStrategy(
         // Skip single fetch and just call the loaders in parallel when this is
         // a SPA mode navigation
         let matchesToLoad = matches.filter((m) => m.shouldLoad);
-        let url = stripIndexParam(singleFetchUrl(request.url));
+        let url = stripIndexParam(singleFetchUrl(request.url, basename));
         let init = await createRequestInit(request);
         let results: Record<string, DataStrategyResult> = {};
         await Promise.all(
@@ -212,7 +214,7 @@ export function getSingleFetchDataStrategy(
 
     // Fetcher loads are singular calls to one loader
     if (fetcherKey) {
-      return singleFetchLoaderFetcherStrategy(request, matches);
+      return singleFetchLoaderFetcherStrategy(request, matches, basename);
     }
 
     // Navigational loads are more complex...
@@ -222,7 +224,8 @@ export function getSingleFetchDataStrategy(
       ssr,
       getRouter(),
       request,
-      matches
+      matches,
+      basename
     );
   };
 }
@@ -231,14 +234,15 @@ export function getSingleFetchDataStrategy(
 // navigations and fetchers)
 async function singleFetchActionStrategy(
   request: Request,
-  matches: DataStrategyFunctionArgs["matches"]
+  matches: DataStrategyFunctionArgs["matches"],
+  basename: string | undefined
 ) {
   let actionMatch = matches.find((m) => m.shouldLoad);
   invariant(actionMatch, "No action match found");
   let actionStatus: number | undefined = undefined;
   let result = await actionMatch.resolve(async (handler) => {
     let result = await handler(async () => {
-      let url = singleFetchUrl(request.url);
+      let url = singleFetchUrl(request.url, basename);
       let init = await createRequestInit(request);
       let { data, status } = await fetchAndDecode(url, init);
       actionStatus = status;
@@ -272,7 +276,8 @@ async function singleFetchLoaderNavigationStrategy(
   ssr: boolean,
   router: DataRouter,
   request: Request,
-  matches: DataStrategyFunctionArgs["matches"]
+  matches: DataStrategyFunctionArgs["matches"],
+  basename: string | undefined
 ) {
   // Track which routes need a server load - in case we need to tack on a
   // `_routes` param
@@ -293,7 +298,7 @@ async function singleFetchLoaderNavigationStrategy(
   let singleFetchDfd = createDeferred<SingleFetchResults>();
 
   // Base URL and RequestInit for calls to the server
-  let url = stripIndexParam(singleFetchUrl(request.url));
+  let url = stripIndexParam(singleFetchUrl(request.url, basename));
   let init = await createRequestInit(request);
 
   // We'll build up this results object as we loop through matches
@@ -418,12 +423,13 @@ async function singleFetchLoaderNavigationStrategy(
 // Fetcher loader calls are much simpler than navigational loader calls
 async function singleFetchLoaderFetcherStrategy(
   request: Request,
-  matches: DataStrategyFunctionArgs["matches"]
+  matches: DataStrategyFunctionArgs["matches"],
+  basename: string | undefined
 ) {
   let fetcherMatch = matches.find((m) => m.shouldLoad);
   invariant(fetcherMatch, "No fetcher match found");
   let result = await fetcherMatch.resolve(async (handler) => {
-    let url = stripIndexParam(singleFetchUrl(request.url));
+    let url = stripIndexParam(singleFetchUrl(request.url, basename));
     let init = await createRequestInit(request);
     return fetchSingleLoader(handler, url, init, fetcherMatch!.route.id);
   });
@@ -462,7 +468,10 @@ function stripIndexParam(url: URL) {
   return url;
 }
 
-export function singleFetchUrl(reqUrl: URL | string) {
+export function singleFetchUrl(
+  reqUrl: URL | string,
+  basename: string | undefined
+) {
   let url =
     typeof reqUrl === "string"
       ? new URL(
@@ -477,6 +486,8 @@ export function singleFetchUrl(reqUrl: URL | string) {
 
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (basename && stripBasename(url.pathname, basename) === "/") {
+    url.pathname = `${basename.replace(/\/$/, "")}/_root.data`;
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
diff --git a/packages/react-router/lib/server-runtime/server.ts b/packages/react-router/lib/server-runtime/server.ts
@@ -1,6 +1,10 @@
 import type { StaticHandler } from "../router/router";
 import type { ErrorResponse } from "../router/utils";
-import { isRouteErrorResponse, ErrorResponseImpl } from "../router/utils";
+import {
+  isRouteErrorResponse,
+  ErrorResponseImpl,
+  stripBasename,
+} from "../router/utils";
 import {
   getStaticContextFromError,
   createStaticHandler,
@@ -106,12 +110,22 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
     }
 
     let url = new URL(request.url);
-    let normalizedPath = url.pathname
-      .replace(/\.data$/, "")
-      .replace(/^\/_root$/, "/");
-    if (normalizedPath !== "/" && normalizedPath.endsWith("/")) {
+
+    let normalizedBasename = _build.basename || "/";
+    let normalizedPath = url.pathname;
+    if (stripBasename(normalizedPath, normalizedBasename) === "/_root.data") {
+      normalizedPath = normalizedBasename;
+    } else if (normalizedPath.endsWith(".data")) {
+      normalizedPath = normalizedPath.replace(/\.data$/, "");
+    }
+
+    if (
+      stripBasename(normalizedPath, normalizedBasename) !== "/" &&
+      normalizedPath.endsWith("/")
+    ) {
       normalizedPath = normalizedPath.slice(0, -1);
     }
+
     let params: RouteMatch<ServerRoute>["params"] = {};
     let handleError = (error: unknown) => {
       if (mode === ServerMode.Development) {
@@ -161,10 +175,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
     }
 
     // Manifest request for fog of war
-    let manifestUrl = `${_build.basename ?? "/"}/__manifest`.replace(
-      /\/+/g,
-      "/"
-    );
+    let manifestUrl = `${normalizedBasename}/__manifest`.replace(/\/+/g, "/");
     if (url.pathname === manifestUrl) {
       try {
         let res = await handleManifestRequest(_build, routes, url);

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +Fix single fetch `_root.data` requests when a `basename` is used