Fix RSC fetcher.load (#13709)

Author: markdalgleish

packages/react-router/lib/router/router.ts

@@ -2258,7 +2258,6 @@ export function createRouter(init: RouterInit): Router {
       return;
     }
 
-    let match = getTargetMatch(matches, path);
     // Create a new context per fetch
     let scopedContext = new unstable_RouterContextProvider(
       init.unstable_getContext ? await init.unstable_getContext() : undefined
@@ -2270,7 +2269,6 @@ export function createRouter(init: RouterInit): Router {
         key,
         routeId,
         path,
-        match,
         matches,
         scopedContext,
         fogOfWar.active,
@@ -2288,7 +2286,6 @@ export function createRouter(init: RouterInit): Router {
       key,
       routeId,
       path,
-      match,
       matches,
       scopedContext,
       fogOfWar.active,
@@ -2304,7 +2301,6 @@ export function createRouter(init: RouterInit): Router {
     key: string,
     routeId: string,
     path: string,
-    match: AgnosticDataRouteMatch,
     requestMatches: AgnosticDataRouteMatch[],
     scopedContext: unstable_RouterContextProvider,
     isFogOfWar: boolean,
@@ -2315,23 +2311,6 @@ export function createRouter(init: RouterInit): Router {
     interruptActiveLoads();
     fetchLoadMatches.delete(key);
 
-    function detectAndHandle405Error(m: AgnosticDataRouteMatch) {
-      if (!m.route.action && !m.route.lazy) {
-        let error = getInternalRouterError(405, {
-          method: submission.formMethod,
-          pathname: path,
-          routeId: routeId,
-        });
-        setFetcherError(key, routeId, error, { flushSync });
-        return true;
-      }
-      return false;
-    }
-
-    if (!isFogOfWar && detectAndHandle405Error(match)) {
-      return;
-    }
-
     // Put this fetcher into it's submitting state
     let existingFetcher = state.fetchers.get(key);
     updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
@@ -2369,14 +2348,21 @@ export function createRouter(init: RouterInit): Router {
         return;
       } else {
         requestMatches = discoverResult.matches;
-        match = getTargetMatch(requestMatches, path);
-
-        if (detectAndHandle405Error(match)) {
-          return;
-        }
       }
     }
 
+    let match = getTargetMatch(requestMatches, path);
+
+    if (!match.route.action && !match.route.lazy) {
+      let error = getInternalRouterError(405, {
+        method: submission.formMethod,
+        pathname: path,
+        routeId: routeId,
+      });
+      setFetcherError(key, routeId, error, { flushSync });
+      return;
+    }
+
     // Call the action for the fetcher
     fetchControllers.set(key, abortController);
 
@@ -2619,7 +2605,6 @@ export function createRouter(init: RouterInit): Router {
     key: string,
     routeId: string,
     path: string,
-    match: AgnosticDataRouteMatch,
     matches: AgnosticDataRouteMatch[],
     scopedContext: unstable_RouterContextProvider,
     isFogOfWar: boolean,
@@ -2667,10 +2652,11 @@ export function createRouter(init: RouterInit): Router {
         return;
       } else {
         matches = discoverResult.matches;
-        match = getTargetMatch(matches, path);
       }
     }
 
+    let match = getTargetMatch(matches, path);
+
     // Call the loader for this fetcher route match
     fetchControllers.set(key, abortController);
 

playground/rsc-parcel/src/routes.ts

@@ -17,6 +17,16 @@ export const routes = [
         // @ts-expect-error
         lazy: () => import("./routes/about/about"),
       },
+      {
+        id: "fetcher",
+        path: "fetcher",
+        lazy: () => import("./routes/fetcher/fetcher"),
+      },
     ],
   },
+  {
+    id: "resource",
+    path: "resource",
+    lazy: () => import("./routes/resource/resource"),
+  },
 ] satisfies ServerRouteObject[];

playground/rsc-parcel/src/routes/fetcher/fetcher.client.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useFetcher } from "react-router";
+import type { loader } from "../resource/resource";
+
+export default function Fetcher() {
+  const fetcher = useFetcher<typeof loader>();
+
+  return (
+    <main>
+      <button onClick={() => fetcher.load("/resource")}>
+        Load fetcher data
+      </button>
+      <pre>{JSON.stringify(fetcher.data, null, 2)}</pre>
+    </main>
+  );
+}

playground/rsc-parcel/src/routes/fetcher/fetcher.ts

@@ -0,0 +1 @@
+export { default } from "./fetcher.client";

playground/rsc-parcel/src/routes/resource/resource.ts

@@ -0,0 +1,6 @@
+export function loader() {
+  return {
+    timestamp: Date.now(),
+    message: "Hello from resource route!",
+  };
+}

playground/rsc-parcel/src/routes/root/root.client.tsx

@@ -39,6 +39,9 @@ export default function Root() {
         <li>
           <Link to="/about">About</Link>
         </li>
+        <li>
+          <Link to="/fetcher">Fetcher</Link>
+        </li>
       </ul>
       {counter}
       <Outlet />