@remix-run/router 1.19.1 → 1.19.2

package/router.ts

@@ -22,7 +22,7 @@ import type {
   FormEncType,
   FormMethod,
   HTMLFormMethod,
-  HandlerResult,
+  DataStrategyResult,
   ImmutableRouteKey,
   MapRoutePropertiesFunction,
   MutationFormMethod,
@@ -1033,7 +1033,7 @@ export function createRouter(init: RouterInit): Router {
 
   // Flag to ignore the next history update, so we can revert the URL change on
   // a POP navigation that was blocked by the user without touching router state
-  let ignoreNextHistoryUpdate = false;
+  let unblockBlockerHistoryUpdate: (() => void) | undefined = undefined;
 
   // Initialize the router, all side effects should be kicked off from here.
   // Implemented as a Fluent API for ease of:
@@ -1045,8 +1045,9 @@ export function createRouter(init: RouterInit): Router {
       ({ action: historyAction, location, delta }) => {
         // Ignore this event if it was just us resetting the URL from a
         // blocked POP navigation
-        if (ignoreNextHistoryUpdate) {
-          ignoreNextHistoryUpdate = false;
+        if (unblockBlockerHistoryUpdate) {
+          unblockBlockerHistoryUpdate();
+          unblockBlockerHistoryUpdate = undefined;
           return;
         }
 
@@ -1068,7 +1069,9 @@ export function createRouter(init: RouterInit): Router {
 
         if (blockerKey && delta != null) {
           // Restore the URL to match the current UI, but don't update router state
-          ignoreNextHistoryUpdate = true;
+          let nextHistoryUpdatePromise = new Promise<void>((resolve) => {
+            unblockBlockerHistoryUpdate = resolve;
+          });
           init.history.go(delta * -1);
 
           // Put the blocker into a blocked state
@@ -1082,8 +1085,10 @@ export function createRouter(init: RouterInit): Router {
                 reset: undefined,
                 location,
               });
-              // Re-do the same POP navigation we just blocked
-              init.history.go(delta);
+              // Re-do the same POP navigation we just blocked, after the url
+              // restoration is also complete.  See:
+              // https://github.com/remix-run/react-router/issues/11613
+              nextHistoryUpdatePromise.then(() => init.history.go(delta));
             },
             reset() {
               let blockers = new Map(state.blockers);
@@ -1479,7 +1484,11 @@ export function createRouter(init: RouterInit): Router {
     startNavigation(
       pendingAction || state.historyAction,
       state.navigation.location,
-      { overrideNavigation: state.navigation }
+      {
+        overrideNavigation: state.navigation,
+        // Proxy through any rending view transition
+        enableViewTransition: pendingViewTransitionEnabled === true,
+      }
     );
   }
 
@@ -1749,11 +1758,13 @@ export function createRouter(init: RouterInit): Router {
     } else {
       let results = await callDataStrategy(
         "action",
+        state,
         request,
         [actionMatch],
-        matches
+        matches,
+        null
       );
-      result = results[0];
+      result = results[actionMatch.route.id];
 
       if (request.signal.aborted) {
         return { shortCircuited: true };
@@ -1775,7 +1786,7 @@ export function createRouter(init: RouterInit): Router {
         );
         replace = location === state.location.pathname + state.location.search;
       }
-      await startRedirectNavigation(request, result, {
+      await startRedirectNavigation(request, result, true, {
         submission,
         replace,
       });
@@ -1995,7 +2006,7 @@ export function createRouter(init: RouterInit): Router {
 
     let { loaderResults, fetcherResults } =
       await callLoadersAndMaybeResolveData(
-        state.matches,
+        state,
         matches,
         matchesToLoad,
         revalidatingFetchers,
@@ -2018,17 +2029,21 @@ export function createRouter(init: RouterInit): Router {
     revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));
 
     // If any loaders returned a redirect Response, start a new REPLACE navigation
-    let redirect = findRedirect([...loaderResults, ...fetcherResults]);
+    let redirect = findRedirect(loaderResults);
     if (redirect) {
-      if (redirect.idx >= matchesToLoad.length) {
-        // If this redirect came from a fetcher make sure we mark it in
-        // fetchRedirectIds so it doesn't get revalidated on the next set of
-        // loader executions
-        let fetcherKey =
-          revalidatingFetchers[redirect.idx - matchesToLoad.length].key;
-        fetchRedirectIds.add(fetcherKey);
-      }
-      await startRedirectNavigation(request, redirect.result, {
+      await startRedirectNavigation(request, redirect.result, true, {
+        replace,
+      });
+      return { shortCircuited: true };
+    }
+
+    redirect = findRedirect(fetcherResults);
+    if (redirect) {
+      // If this redirect came from a fetcher make sure we mark it in
+      // fetchRedirectIds so it doesn't get revalidated on the next set of
+      // loader executions
+      fetchRedirectIds.add(redirect.key);
+      await startRedirectNavigation(request, redirect.result, true, {
         replace,
       });
       return { shortCircuited: true };
@@ -2287,11 +2302,13 @@ export function createRouter(init: RouterInit): Router {
     let originatingLoadId = incrementingLoadId;
     let actionResults = await callDataStrategy(
       "action",
+      state,
       fetchRequest,
       [match],
-      requestMatches
+      requestMatches,
+      key
     );
-    let actionResult = actionResults[0];
+    let actionResult = actionResults[match.route.id];
 
     if (fetchRequest.signal.aborted) {
       // We can delete this so long as we weren't aborted by our own fetcher
@@ -2324,7 +2341,7 @@ export function createRouter(init: RouterInit): Router {
         } else {
           fetchRedirectIds.add(key);
           updateFetcherState(key, getLoadingFetcher(submission));
-          return startRedirectNavigation(fetchRequest, actionResult, {
+          return startRedirectNavigation(fetchRequest, actionResult, false, {
             fetcherSubmission: submission,
           });
         }
@@ -2415,7 +2432,7 @@ export function createRouter(init: RouterInit): Router {
 
     let { loaderResults, fetcherResults } =
       await callLoadersAndMaybeResolveData(
-        state.matches,
+        state,
         matches,
         matchesToLoad,
         revalidatingFetchers,
@@ -2435,23 +2452,32 @@ export function createRouter(init: RouterInit): Router {
     fetchControllers.delete(key);
     revalidatingFetchers.forEach((r) => fetchControllers.delete(r.key));
 
-    let redirect = findRedirect([...loaderResults, ...fetcherResults]);
+    let redirect = findRedirect(loaderResults);
     if (redirect) {
-      if (redirect.idx >= matchesToLoad.length) {
-        // If this redirect came from a fetcher make sure we mark it in
-        // fetchRedirectIds so it doesn't get revalidated on the next set of
-        // loader executions
-        let fetcherKey =
-          revalidatingFetchers[redirect.idx - matchesToLoad.length].key;
-        fetchRedirectIds.add(fetcherKey);
-      }
-      return startRedirectNavigation(revalidationRequest, redirect.result);
+      return startRedirectNavigation(
+        revalidationRequest,
+        redirect.result,
+        false
+      );
+    }
+
+    redirect = findRedirect(fetcherResults);
+    if (redirect) {
+      // If this redirect came from a fetcher make sure we mark it in
+      // fetchRedirectIds so it doesn't get revalidated on the next set of
+      // loader executions
+      fetchRedirectIds.add(redirect.key);
+      return startRedirectNavigation(
+        revalidationRequest,
+        redirect.result,
+        false
+      );
     }
 
     // Process and commit output from loaders
     let { loaderData, errors } = processLoaderData(
       state,
-      state.matches,
+      matches,
       matchesToLoad,
       loaderResults,
       undefined,
@@ -2564,11 +2590,13 @@ export function createRouter(init: RouterInit): Router {
     let originatingLoadId = incrementingLoadId;
     let results = await callDataStrategy(
       "loader",
+      state,
       fetchRequest,
       [match],
-      matches
+      matches,
+      key
     );
-    let result = results[0];
+    let result = results[match.route.id];
 
     // Deferred isn't supported for fetcher loads, await everything and treat it
     // as a normal load.  resolveDeferredData will return undefined if this
@@ -2606,7 +2634,7 @@ export function createRouter(init: RouterInit): Router {
         return;
       } else {
         fetchRedirectIds.add(key);
-        await startRedirectNavigation(fetchRequest, result);
+        await startRedirectNavigation(fetchRequest, result, false);
         return;
       }
     }
@@ -2645,6 +2673,7 @@ export function createRouter(init: RouterInit): Router {
   async function startRedirectNavigation(
     request: Request,
     redirect: RedirectResult,
+    isNavigation: boolean,
     {
       submission,
       fetcherSubmission,
@@ -2731,8 +2760,11 @@ export function createRouter(init: RouterInit): Router {
           ...activeSubmission,
           formAction: location,
         },
-        // Preserve this flag across redirects
+        // Preserve these flags across redirects
         preventScrollReset: pendingPreventScrollReset,
+        enableViewTransition: isNavigation
+          ? pendingViewTransitionEnabled
+          : undefined,
       });
     } else {
       // If we have a navigation submission, we will preserve it through the
@@ -2745,8 +2777,11 @@ export function createRouter(init: RouterInit): Router {
         overrideNavigation,
         // Send fetcher submissions through for shouldRevalidate
         fetcherSubmission,
-        // Preserve this flag across redirects
+        // Preserve these flags across redirects
         preventScrollReset: pendingPreventScrollReset,
+        enableViewTransition: isNavigation
+          ? pendingViewTransitionEnabled
+          : undefined,
       });
     }
   }
@@ -2755,102 +2790,123 @@ export function createRouter(init: RouterInit): Router {
   // pass around the manifest, mapRouteProperties, etc.
   async function callDataStrategy(
     type: "loader" | "action",
+    state: RouterState,
     request: Request,
     matchesToLoad: AgnosticDataRouteMatch[],
-    matches: AgnosticDataRouteMatch[]
-  ): Promise<DataResult[]> {
+    matches: AgnosticDataRouteMatch[],
+    fetcherKey: string | null
+  ): Promise<Record<string, DataResult>> {
+    let results: Record<string, DataStrategyResult>;
+    let dataResults: Record<string, DataResult> = {};
     try {
-      let results = await callDataStrategyImpl(
+      results = await callDataStrategyImpl(
         dataStrategyImpl,
         type,
+        state,
         request,
         matchesToLoad,
         matches,
+        fetcherKey,
         manifest,
         mapRouteProperties
       );
-
-      return await Promise.all(
-        results.map((result, i) => {
-          if (isRedirectHandlerResult(result)) {
-            let response = result.result as Response;
-            return {
-              type: ResultType.redirect,
-              response: normalizeRelativeRoutingRedirectResponse(
-                response,
-                request,
-                matchesToLoad[i].route.id,
-                matches,
-                basename,
-                future.v7_relativeSplatPath
-              ),
-            };
-          }
-
-          return convertHandlerResultToDataResult(result);
-        })
-      );
     } catch (e) {
       // If the outer dataStrategy method throws, just return the error for all
       // matches - and it'll naturally bubble to the root
-      return matchesToLoad.map(() => ({
-        type: ResultType.error,
-        error: e,
-      }));
+      matchesToLoad.forEach((m) => {
+        dataResults[m.route.id] = {
+          type: ResultType.error,
+          error: e,
+        };
+      });
+      return dataResults;
+    }
+
+    for (let [routeId, result] of Object.entries(results)) {
+      if (isRedirectDataStrategyResultResult(result)) {
+        let response = result.result as Response;
+        dataResults[routeId] = {
+          type: ResultType.redirect,
+          response: normalizeRelativeRoutingRedirectResponse(
+            response,
+            request,
+            routeId,
+            matches,
+            basename,
+            future.v7_relativeSplatPath
+          ),
+        };
+      } else {
+        dataResults[routeId] = await convertDataStrategyResultToDataResult(
+          result
+        );
+      }
     }
+
+    return dataResults;
   }
 
   async function callLoadersAndMaybeResolveData(
-    currentMatches: AgnosticDataRouteMatch[],
+    state: RouterState,
     matches: AgnosticDataRouteMatch[],
     matchesToLoad: AgnosticDataRouteMatch[],
     fetchersToLoad: RevalidatingFetcher[],
     request: Request
   ) {
-    let [loaderResults, ...fetcherResults] = await Promise.all([
-      matchesToLoad.length
-        ? callDataStrategy("loader", request, matchesToLoad, matches)
-        : [],
-      ...fetchersToLoad.map((f) => {
+    let currentMatches = state.matches;
+
+    // Kick off loaders and fetchers in parallel
+    let loaderResultsPromise = callDataStrategy(
+      "loader",
+      state,
+      request,
+      matchesToLoad,
+      matches,
+      null
+    );
+
+    let fetcherResultsPromise = Promise.all(
+      fetchersToLoad.map(async (f) => {
         if (f.matches && f.match && f.controller) {
-          let fetcherRequest = createClientSideRequest(
-            init.history,
-            f.path,
-            f.controller.signal
-          );
-          return callDataStrategy(
+          let results = await callDataStrategy(
             "loader",
-            fetcherRequest,
+            state,
+            createClientSideRequest(init.history, f.path, f.controller.signal),
             [f.match],
-            f.matches
-          ).then((r) => r[0]);
+            f.matches,
+            f.key
+          );
+          let result = results[f.match.route.id];
+          // Fetcher results are keyed by fetcher key from here on out, not routeId
+          return { [f.key]: result };
         } else {
-          return Promise.resolve<DataResult>({
-            type: ResultType.error,
-            error: getInternalRouterError(404, {
-              pathname: f.path,
-            }),
+          return Promise.resolve({
+            [f.key]: {
+              type: ResultType.error,
+              error: getInternalRouterError(404, {
+                pathname: f.path,
+              }),
+            } as ErrorResult,
           });
         }
-      }),
-    ]);
+      })
+    );
+
+    let loaderResults = await loaderResultsPromise;
+    let fetcherResults = (await fetcherResultsPromise).reduce(
+      (acc, r) => Object.assign(acc, r),
+      {}
+    );
 
     await Promise.all([
-      resolveDeferredResults(
-        currentMatches,
-        matchesToLoad,
+      resolveNavigationDeferredResults(
+        matches,
         loaderResults,
-        loaderResults.map(() => request.signal),
-        false,
-        state.loaderData
-      ),
-      resolveDeferredResults(
+        request.signal,
         currentMatches,
-        fetchersToLoad.map((f) => f.match),
-        fetcherResults,
-        fetchersToLoad.map((f) => (f.controller ? f.controller.signal : null)),
-        true
+        state.loaderData
       ),
+      resolveFetcherDeferredResults(matches, fetcherResults, fetchersToLoad),
     ]);
 
     return {
@@ -3700,9 +3756,9 @@ export function createStaticHandler(
           };
     } catch (e) {
       // If the user threw/returned a Response in callLoaderOrAction for a
-      // `queryRoute` call, we throw the `HandlerResult` to bail out early
+      // `queryRoute` call, we throw the `DataStrategyResult` to bail out early
       // and then return or throw the raw Response here accordingly
-      if (isHandlerResult(e) && isResponse(e.result)) {
+      if (isDataStrategyResult(e) && isResponse(e.result)) {
         if (e.type === ResultType.error) {
           throw e.result;
         }
@@ -3751,7 +3807,7 @@ export function createStaticHandler(
         requestContext,
         unstable_dataStrategy
       );
-      result = results[0];
+      result = results[actionMatch.route.id];
 
       if (request.signal.aborted) {
         throwStaticHandlerAbortedError(request, isRouteRequest, future);
@@ -3942,7 +3998,6 @@ export function createStaticHandler(
     let activeDeferreds = new Map<string, DeferredData>();
     let context = processRouteLoaderData(
       matches,
-      matchesToLoad,
       results,
       pendingActionResult,
       activeDeferreds,
@@ -3979,27 +4034,34 @@ export function createStaticHandler(
     isRouteRequest: boolean,
     requestContext: unknown,
     unstable_dataStrategy: DataStrategyFunction | null
-  ): Promise<DataResult[]> {
+  ): Promise<Record<string, DataResult>> {
     let results = await callDataStrategyImpl(
       unstable_dataStrategy || defaultDataStrategy,
       type,
+      null,
       request,
       matchesToLoad,
       matches,
+      null,
       manifest,
       mapRouteProperties,
       requestContext
     );
 
-    return await Promise.all(
-      results.map((result, i) => {
-        if (isRedirectHandlerResult(result)) {
+    let dataResults: Record<string, DataResult> = {};
+    await Promise.all(
+      matches.map(async (match) => {
+        if (!(match.route.id in results)) {
+          return;
+        }
+        let result = results[match.route.id];
+        if (isRedirectDataStrategyResultResult(result)) {
           let response = result.result as Response;
           // Throw redirects and let the server handle them with an HTTP redirect
           throw normalizeRelativeRoutingRedirectResponse(
             response,
             request,
-            matchesToLoad[i].route.id,
+            match.route.id,
             matches,
             basename,
             future.v7_relativeSplatPath
@@ -4011,9 +4073,11 @@ export function createStaticHandler(
           throw result;
         }
 
-        return convertHandlerResultToDataResult(result);
+        dataResults[match.route.id] =
+          await convertDataStrategyResultToDataResult(result);
       })
     );
+    return dataResults;
   }
 
   return {
@@ -4704,77 +4768,91 @@ async function loadLazyRouteModule(
 }
 
 // Default implementation of `dataStrategy` which fetches all loaders in parallel
-function defaultDataStrategy(
-  opts: DataStrategyFunctionArgs
-): ReturnType<DataStrategyFunction> {
-  return Promise.all(opts.matches.map((m) => m.resolve()));
+async function defaultDataStrategy({
+  matches,
+}: DataStrategyFunctionArgs): ReturnType<DataStrategyFunction> {
+  let matchesToLoad = matches.filter((m) => m.shouldLoad);
+  let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));
+  return results.reduce(
+    (acc, result, i) =>
+      Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
+    {}
+  );
 }
 
 async function callDataStrategyImpl(
   dataStrategyImpl: DataStrategyFunction,
   type: "loader" | "action",
+  state: RouterState | null,
   request: Request,
   matchesToLoad: AgnosticDataRouteMatch[],
   matches: AgnosticDataRouteMatch[],
+  fetcherKey: string | null,
   manifest: RouteManifest,
   mapRouteProperties: MapRoutePropertiesFunction,
   requestContext?: unknown
-): Promise<HandlerResult[]> {
-  let routeIdsToLoad = matchesToLoad.reduce(
-    (acc, m) => acc.add(m.route.id),
-    new Set<string>()
+): Promise<Record<string, DataStrategyResult>> {
+  let loadRouteDefinitionsPromises = matches.map((m) =>
+    m.route.lazy
+      ? loadLazyRouteModule(m.route, mapRouteProperties, manifest)
+      : undefined
   );
-  let loadedMatches = new Set<string>();
+
+  let dsMatches = matches.map((match, i) => {
+    let loadRoutePromise = loadRouteDefinitionsPromises[i];
+    let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);
+    // `resolve` encapsulates route.lazy(), executing the loader/action,
+    // and mapping return values/thrown errors to a `DataStrategyResult`.  Users
+    // can pass a callback to take fine-grained control over the execution
+    // of the loader/action
+    let resolve: DataStrategyMatch["resolve"] = async (handlerOverride) => {
+      if (
+        handlerOverride &&
+        request.method === "GET" &&
+        (match.route.lazy || match.route.loader)
+      ) {
+        shouldLoad = true;
+      }
+      return shouldLoad
+        ? callLoaderOrAction(
+            type,
+            request,
+            match,
+            loadRoutePromise,
+            handlerOverride,
+            requestContext
+          )
+        : Promise.resolve({ type: ResultType.data, result: undefined });
+    };
+
+    return {
+      ...match,
+      shouldLoad,
+      resolve,
+    };
+  });
 
   // Send all matches here to allow for a middleware-type implementation.
   // handler will be a no-op for unneeded routes and we filter those results
   // back out below.
   let results = await dataStrategyImpl({
-    matches: matches.map((match) => {
-      let shouldLoad = routeIdsToLoad.has(match.route.id);
-      // `resolve` encapsulates the route.lazy, executing the
-      // loader/action, and mapping return values/thrown errors to a
-      // HandlerResult.  Users can pass a callback to take fine-grained control
-      // over the execution of the loader/action
-      let resolve: DataStrategyMatch["resolve"] = (handlerOverride) => {
-        loadedMatches.add(match.route.id);
-        return shouldLoad
-          ? callLoaderOrAction(
-              type,
-              request,
-              match,
-              manifest,
-              mapRouteProperties,
-              handlerOverride,
-              requestContext
-            )
-          : Promise.resolve({ type: ResultType.data, result: undefined });
-      };
-
-      return {
-        ...match,
-        shouldLoad,
-        resolve,
-      };
-    }),
+    matches: dsMatches,
     request,
     params: matches[0].params,
+    fetcherKey,
     context: requestContext,
   });
 
-  // Throw if any loadRoute implementations not called since they are what
-  // ensures a route is fully loaded
-  matches.forEach((m) =>
-    invariant(
-      loadedMatches.has(m.route.id),
-      `\`match.resolve()\` was not called for route id "${m.route.id}". ` +
-        "You must call `match.resolve()` on every match passed to " +
-        "`dataStrategy` to ensure all routes are properly loaded."
-    )
-  );
+  // Wait for all routes to load here but 'swallow the error since we want
+  // it to bubble up from the `await loadRoutePromise` in `callLoaderOrAction` -
+  // called from `match.resolve()`
+  try {
+    await Promise.all(loadRouteDefinitionsPromises);
+  } catch (e) {
+    // No-op
+  }
 
-  // Filter out any middleware-only matches for which we didn't need to run handlers
-  return results.filter((_, i) => routeIdsToLoad.has(matches[i].route.id));
+  return results;
 }
 
 // Default logic for calling a loader/action is the user has no specified a dataStrategy
@@ -4782,22 +4860,21 @@ async function callLoaderOrAction(
   type: "loader" | "action",
   request: Request,
   match: AgnosticDataRouteMatch,
-  manifest: RouteManifest,
-  mapRouteProperties: MapRoutePropertiesFunction,
+  loadRoutePromise: Promise<void> | undefined,
   handlerOverride: Parameters<DataStrategyMatch["resolve"]>[0],
   staticContext?: unknown
-): Promise<HandlerResult> {
-  let result: HandlerResult;
+): Promise<DataStrategyResult> {
+  let result: DataStrategyResult;
   let onReject: (() => void) | undefined;
 
   let runHandler = (
     handler: AgnosticRouteObject["loader"] | AgnosticRouteObject["action"]
-  ): Promise<HandlerResult> => {
+  ): Promise<DataStrategyResult> => {
     // Setup a promise we can race against so that abort signals short circuit
     let reject: () => void;
-    // This will never resolve so safe to type it as Promise<HandlerResult> to
+    // This will never resolve so safe to type it as Promise<DataStrategyResult> to
     // satisfy the function return value
-    let abortPromise = new Promise<HandlerResult>((_, r) => (reject = r));
+    let abortPromise = new Promise<DataStrategyResult>((_, r) => (reject = r));
     onReject = () => reject();
     request.signal.addEventListener("abort", onReject);
 
@@ -4820,19 +4897,16 @@ async function callLoaderOrAction(
       );
     };
 
-    let handlerPromise: Promise<HandlerResult>;
-    if (handlerOverride) {
-      handlerPromise = handlerOverride((ctx: unknown) => actualHandler(ctx));
-    } else {
-      handlerPromise = (async () => {
-        try {
-          let val = await actualHandler();
-          return { type: "data", result: val };
-        } catch (e) {
-          return { type: "error", result: e };
-        }
-      })();
-    }
+    let handlerPromise: Promise<DataStrategyResult> = (async () => {
+      try {
+        let val = await (handlerOverride
+          ? handlerOverride((ctx: unknown) => actualHandler(ctx))
+          : actualHandler());
+        return { type: "data", result: val };
+      } catch (e) {
+        return { type: "error", result: e };
+      }
+    })();
 
     return Promise.race([handlerPromise, abortPromise]);
   };
@@ -4840,7 +4914,8 @@ async function callLoaderOrAction(
   try {
     let handler = match.route[type];
 
-    if (match.route.lazy) {
+    // If we have a route.lazy promise, await that first
+    if (loadRoutePromise) {
       if (handler) {
         // Run statically defined handler in parallel with lazy()
         let handlerError;
@@ -4851,7 +4926,7 @@ async function callLoaderOrAction(
           runHandler(handler).catch((e) => {
             handlerError = e;
           }),
-          loadLazyRouteModule(match.route, mapRouteProperties, manifest),
+          loadRoutePromise,
         ]);
         if (handlerError !== undefined) {
           throw handlerError;
@@ -4859,7 +4934,7 @@ async function callLoaderOrAction(
         result = value!;
       } else {
         // Load lazy route module, then run any returned handler
-        await loadLazyRouteModule(match.route, mapRouteProperties, manifest);
+        await loadRoutePromise;
 
         handler = match.route[type];
         if (handler) {
@@ -4899,7 +4974,7 @@ async function callLoaderOrAction(
     );
   } catch (e) {
     // We should already be catching and converting normal handler executions to
-    // HandlerResults and returning them, so anything that throws here is an
+    // DataStrategyResults and returning them, so anything that throws here is an
     // unexpected error we still need to wrap
     return { type: ResultType.error, result: e };
   } finally {
@@ -4911,10 +4986,10 @@ async function callLoaderOrAction(
   return result;
 }
 
-async function convertHandlerResultToDataResult(
-  handlerResult: HandlerResult
+async function convertDataStrategyResultToDataResult(
+  dataStrategyResult: DataStrategyResult
 ): Promise<DataResult> {
-  let { result, type } = handlerResult;
+  let { result, type } = dataStrategyResult;
 
   if (isResponse(result)) {
     let data: any;
@@ -5116,8 +5191,7 @@ function convertSearchParamsToFormData(
 
 function processRouteLoaderData(
   matches: AgnosticDataRouteMatch[],
-  matchesToLoad: AgnosticDataRouteMatch[],
-  results: DataResult[],
+  results: Record<string, DataResult>,
   pendingActionResult: PendingActionResult | undefined,
   activeDeferreds: Map<string, DeferredData>,
   skipLoaderErrorBubbling: boolean
@@ -5139,8 +5213,12 @@ function processRouteLoaderData(
       : undefined;
 
   // Process loader results into state.loaderData/state.errors
-  results.forEach((result, index) => {
-    let id = matchesToLoad[index].route.id;
+  matches.forEach((match) => {
+    if (!(match.route.id in results)) {
+      return;
+    }
+    let id = match.route.id;
+    let result = results[id];
     invariant(
       !isRedirectResult(result),
       "Cannot handle redirect results in processLoaderData"
@@ -5233,10 +5311,10 @@ function processLoaderData(
   state: RouterState,
   matches: AgnosticDataRouteMatch[],
   matchesToLoad: AgnosticDataRouteMatch[],
-  results: DataResult[],
+  results: Record<string, DataResult>,
   pendingActionResult: PendingActionResult | undefined,
   revalidatingFetchers: RevalidatingFetcher[],
-  fetcherResults: DataResult[],
+  fetcherResults: Record<string, DataResult>,
   activeDeferreds: Map<string, DeferredData>
 ): {
   loaderData: RouterState["loaderData"];
@@ -5244,7 +5322,6 @@ function processLoaderData(
 } {
   let { loaderData, errors } = processRouteLoaderData(
     matches,
-    matchesToLoad,
     results,
     pendingActionResult,
     activeDeferreds,
@@ -5252,18 +5329,15 @@ function processLoaderData(
   );
 
   // Process results from our revalidating fetchers
-  for (let index = 0; index < revalidatingFetchers.length; index++) {
-    let { key, match, controller } = revalidatingFetchers[index];
-    invariant(
-      fetcherResults !== undefined && fetcherResults[index] !== undefined,
-      "Did not find corresponding fetcher result"
-    );
-    let result = fetcherResults[index];
+  revalidatingFetchers.forEach((rf) => {
+    let { key, match, controller } = rf;
+    let result = fetcherResults[key];
+    invariant(result, "Did not find corresponding fetcher result");
 
     // Process fetcher non-redirect errors
     if (controller && controller.signal.aborted) {
       // Nothing to do for aborted fetchers
-      continue;
+      return;
     } else if (isErrorResult(result)) {
       let boundaryMatch = findNearestBoundary(state.matches, match?.route.id);
       if (!(errors && errors[boundaryMatch.route.id])) {
@@ -5285,7 +5359,7 @@ function processLoaderData(
       let doneFetcher = getDoneFetcher(result.data);
       state.fetchers.set(key, doneFetcher);
     }
-  }
+  });
 
   return { loaderData, errors };
 }
@@ -5443,12 +5517,13 @@ function getInternalRouterError(
 
 // Find any returned redirect errors, starting from the lowest match
 function findRedirect(
-  results: DataResult[]
-): { result: RedirectResult; idx: number } | undefined {
-  for (let i = results.length - 1; i >= 0; i--) {
-    let result = results[i];
+  results: Record<string, DataResult>
+): { key: string; result: RedirectResult } | undefined {
+  let entries = Object.entries(results);
+  for (let i = entries.length - 1; i >= 0; i--) {
+    let [key, result] = entries[i];
     if (isRedirectResult(result)) {
-      return { result, idx: i };
+      return { key, result };
     }
   }
 }
@@ -5483,7 +5558,7 @@ function isPromise<T = unknown>(val: unknown): val is Promise<T> {
   return typeof val === "object" && val != null && "then" in val;
 }
 
-function isHandlerResult(result: unknown): result is HandlerResult {
+function isDataStrategyResult(result: unknown): result is DataStrategyResult {
   return (
     result != null &&
     typeof result === "object" &&
@@ -5493,7 +5568,7 @@ function isHandlerResult(result: unknown): result is HandlerResult {
   );
 }
 
-function isRedirectHandlerResult(result: HandlerResult) {
+function isRedirectDataStrategyResultResult(result: DataStrategyResult) {
   return (
     isResponse(result.result) && redirectStatusCodes.has(result.result.status)
   );
@@ -5566,17 +5641,17 @@ function isMutationMethod(
   return validMutationMethods.has(method.toLowerCase() as MutationFormMethod);
 }
 
-async function resolveDeferredResults(
+async function resolveNavigationDeferredResults(
+  matches: (AgnosticDataRouteMatch | null)[],
+  results: Record<string, DataResult>,
+  signal: AbortSignal,
   currentMatches: AgnosticDataRouteMatch[],
-  matchesToLoad: (AgnosticDataRouteMatch | null)[],
-  results: DataResult[],
-  signals: (AbortSignal | null)[],
-  isFetcher: boolean,
-  currentLoaderData?: RouteData
+  currentLoaderData: RouteData
 ) {
-  for (let index = 0; index < results.length; index++) {
-    let result = results[index];
-    let match = matchesToLoad[index];
+  let entries = Object.entries(results);
+  for (let index = 0; index < entries.length; index++) {
+    let [routeId, result] = entries[index];
+    let match = matches.find((m) => m?.route.id === routeId);
     // If we don't have a match, then we can have a deferred result to do
     // anything with.  This is for revalidating fetchers where the route was
     // removed during HMR
@@ -5592,24 +5667,54 @@ async function resolveDeferredResults(
       !isNewRouteInstance(currentMatch, match) &&
       (currentLoaderData && currentLoaderData[match.route.id]) !== undefined;
 
-    if (isDeferredResult(result) && (isFetcher || isRevalidatingLoader)) {
+    if (isDeferredResult(result) && isRevalidatingLoader) {
       // Note: we do not have to touch activeDeferreds here since we race them
       // against the signal in resolveDeferredData and they'll get aborted
       // there if needed
-      let signal = signals[index];
-      invariant(
-        signal,
-        "Expected an AbortSignal for revalidating fetcher deferred result"
-      );
-      await resolveDeferredData(result, signal, isFetcher).then((result) => {
+      await resolveDeferredData(result, signal, false).then((result) => {
         if (result) {
-          results[index] = result || results[index];
+          results[routeId] = result;
         }
       });
     }
   }
 }
 
+async function resolveFetcherDeferredResults(
+  matches: (AgnosticDataRouteMatch | null)[],
+  results: Record<string, DataResult>,
+  revalidatingFetchers: RevalidatingFetcher[]
+) {
+  for (let index = 0; index < revalidatingFetchers.length; index++) {
+    let { key, routeId, controller } = revalidatingFetchers[index];
+    let result = results[key];
+    let match = matches.find((m) => m?.route.id === routeId);
+    // If we don't have a match, then we can have a deferred result to do
+    // anything with.  This is for revalidating fetchers where the route was
+    // removed during HMR
+    if (!match) {
+      continue;
+    }
+
+    if (isDeferredResult(result)) {
+      // Note: we do not have to touch activeDeferreds here since we race them
+      // against the signal in resolveDeferredData and they'll get aborted
+      // there if needed
+      invariant(
+        controller,
+        "Expected an AbortController for revalidating fetcher deferred result"
+      );
+      await resolveDeferredData(result, controller.signal, true).then(
+        (result) => {
+          if (result) {
+            results[key] = result;
+          }
+        }
+      );
+    }
+  }
+}
+
 async function resolveDeferredData(
   result: DeferredResult,
   signal: AbortSignal,