react-router 7.2.0 → 7.3.0-pre.1

package/dist/development/dom-export.js

@@ -1,5 +1,5 @@
 /**
- * react-router v7.2.0
+ * react-router v7.3.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -15,6 +15,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -36,6 +39,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 
 // dom-export.ts
 var dom_export_exports = {};
@@ -245,6 +251,30 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options =
 }
 
 // lib/router/utils.ts
+var _map;
+var unstable_RouterContextProvider = class {
+  constructor(init) {
+    __privateAdd(this, _map, /* @__PURE__ */ new Map());
+    if (init) {
+      for (let [context, value] of init) {
+        this.set(context, value);
+      }
+    }
+  }
+  get(context) {
+    if (__privateGet(this, _map).has(context)) {
+      return __privateGet(this, _map).get(context);
+    }
+    if (context.defaultValue !== void 0) {
+      return context.defaultValue;
+    }
+    throw new Error("No value found for context");
+  }
+  set(context, value) {
+    __privateGet(this, _map).set(context, value);
+  }
+};
+_map = new WeakMap();
 var immutableRouteKeys = /* @__PURE__ */ new Set([
   "lazy",
   "caseSensitive",
@@ -764,9 +794,9 @@ function createRouter(init) {
   );
   let inFlightDataRoutes;
   let basename = init.basename || "/";
-  let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
-  let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
+  let dataStrategyImpl = init.dataStrategy || defaultDataStrategyWithMiddleware;
   let future = {
+    unstable_middleware: false,
     ...init.future
   };
   let unlistenHistory = null;
@@ -778,7 +808,7 @@ function createRouter(init) {
   let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
   let initialMatchesIsFOW = false;
   let initialErrors = null;
-  if (initialMatches == null && !patchRoutesOnNavigationImpl) {
+  if (initialMatches == null && !init.patchRoutesOnNavigation) {
     let error = getInternalRouterError(404, {
       pathname: init.history.location.pathname
     });
@@ -1209,6 +1239,9 @@ function createRouter(init) {
       pendingNavigationController.signal,
       opts && opts.submission
     );
+    let scopedContext = new unstable_RouterContextProvider(
+      init.unstable_getContext ? await init.unstable_getContext() : void 0
+    );
     let pendingActionResult;
     if (opts && opts.pendingError) {
       pendingActionResult = [
@@ -1221,6 +1254,7 @@ function createRouter(init) {
         location,
         opts.submission,
         matches,
+        scopedContext,
         fogOfWar.active,
         { replace: opts.replace, flushSync: flushSync2 }
       );
@@ -1261,6 +1295,7 @@ function createRouter(init) {
       request,
       location,
       matches,
+      scopedContext,
       fogOfWar.active,
       loadingNavigation,
       opts && opts.submission,
@@ -1281,7 +1316,7 @@ function createRouter(init) {
       errors
     });
   }
-  async function handleAction(request, location, submission, matches, isFogOfWar, opts = {}) {
+  async function handleAction(request, location, submission, matches, scopedContext, isFogOfWar, opts = {}) {
     interruptActiveLoads();
     let navigation = getSubmittingNavigation(location, submission);
     updateState({ navigation }, { flushSync: opts.flushSync === true });
@@ -1337,13 +1372,21 @@ function createRouter(init) {
     } else {
       let results = await callDataStrategy(
         "action",
-        state,
         request,
         [actionMatch],
         matches,
+        scopedContext,
         null
       );
       result = results[actionMatch.route.id];
+      if (!result) {
+        for (let match of matches) {
+          if (results[match.route.id]) {
+            result = results[match.route.id];
+            break;
+          }
+        }
+      }
       if (request.signal.aborted) {
         return { shortCircuited: true };
       }
@@ -1381,7 +1424,7 @@ function createRouter(init) {
       pendingActionResult: [actionMatch.route.id, result]
     };
   }
-  async function handleLoaders(request, location, matches, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace2, initialHydration, flushSync2, pendingActionResult) {
+  async function handleLoaders(request, location, matches, scopedContext, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace2, initialHydration, flushSync2, pendingActionResult) {
     let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
     let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
     let shouldUpdateNavigationState = !isUninterruptedRevalidation && !initialHydration;
@@ -1491,11 +1534,11 @@ function createRouter(init) {
       );
     }
     let { loaderResults, fetcherResults } = await callLoadersAndMaybeResolveData(
-      state,
       matches,
       matchesToLoad,
       revalidatingFetchers,
-      request
+      request,
+      scopedContext
     );
     if (request.signal.aborted) {
       return { shortCircuited: true };
@@ -1603,6 +1646,9 @@ function createRouter(init) {
       return;
     }
     let match = getTargetMatch(matches, path);
+    let scopedContext = new unstable_RouterContextProvider(
+      init.unstable_getContext ? await init.unstable_getContext() : void 0
+    );
     let preventScrollReset = (opts && opts.preventScrollReset) === true;
     if (submission && isMutationMethod(submission.formMethod)) {
       await handleFetcherAction(
@@ -1611,6 +1657,7 @@ function createRouter(init) {
         path,
         match,
         matches,
+        scopedContext,
         fogOfWar.active,
         flushSync2,
         preventScrollReset,
@@ -1625,13 +1672,14 @@ function createRouter(init) {
       path,
       match,
       matches,
+      scopedContext,
       fogOfWar.active,
       flushSync2,
       preventScrollReset,
       submission
     );
   }
-  async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync2, preventScrollReset, submission) {
+  async function handleFetcherAction(key, routeId, path, match, requestMatches, scopedContext, isFogOfWar, flushSync2, preventScrollReset, submission) {
     interruptActiveLoads();
     fetchLoadMatches.delete(key);
     function detectAndHandle405Error(m) {
@@ -1664,7 +1712,8 @@ function createRouter(init) {
       let discoverResult = await discoverRoutes(
         requestMatches,
         path,
-        fetchRequest.signal
+        fetchRequest.signal,
+        key
       );
       if (discoverResult.type === "aborted") {
         return;
@@ -1691,10 +1740,10 @@ function createRouter(init) {
     let originatingLoadId = incrementingLoadId;
     let actionResults = await callDataStrategy(
       "action",
-      state,
       fetchRequest,
       [match],
       requestMatches,
+      scopedContext,
       key
     );
     let actionResult = actionResults[match.route.id];
@@ -1778,11 +1827,11 @@ function createRouter(init) {
       abortPendingFetchRevalidations
     );
     let { loaderResults, fetcherResults } = await callLoadersAndMaybeResolveData(
-      state,
       matches,
       matchesToLoad,
       revalidatingFetchers,
-      revalidationRequest
+      revalidationRequest,
+      scopedContext
     );
     if (abortController.signal.aborted) {
       return;
@@ -1849,7 +1898,7 @@ function createRouter(init) {
       isRevalidationRequired = false;
     }
   }
-  async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync2, preventScrollReset, submission) {
+  async function handleFetcherLoader(key, routeId, path, match, matches, scopedContext, isFogOfWar, flushSync2, preventScrollReset, submission) {
     let existingFetcher = state.fetchers.get(key);
     updateFetcherState(
       key,
@@ -1869,7 +1918,8 @@ function createRouter(init) {
       let discoverResult = await discoverRoutes(
         matches,
         path,
-        fetchRequest.signal
+        fetchRequest.signal,
+        key
       );
       if (discoverResult.type === "aborted") {
         return;
@@ -1893,10 +1943,10 @@ function createRouter(init) {
     let originatingLoadId = incrementingLoadId;
     let results = await callDataStrategy(
       "loader",
-      state,
       fetchRequest,
       [match],
       matches,
+      scopedContext,
       key
     );
     let result = results[match.route.id];
@@ -1998,20 +2048,21 @@ function createRouter(init) {
       });
     }
   }
-  async function callDataStrategy(type, state2, request, matchesToLoad, matches, fetcherKey) {
+  async function callDataStrategy(type, request, matchesToLoad, matches, scopedContext, fetcherKey) {
     let results;
     let dataResults = {};
     try {
       results = await callDataStrategyImpl(
         dataStrategyImpl,
         type,
-        state2,
         request,
         matchesToLoad,
         matches,
         fetcherKey,
         manifest,
-        mapRouteProperties2
+        mapRouteProperties2,
+        scopedContext,
+        future.unstable_middleware
       );
     } catch (e) {
       matchesToLoad.forEach((m) => {
@@ -2043,13 +2094,13 @@ function createRouter(init) {
     }
     return dataResults;
   }
-  async function callLoadersAndMaybeResolveData(state2, matches, matchesToLoad, fetchersToLoad, request) {
+  async function callLoadersAndMaybeResolveData(matches, matchesToLoad, fetchersToLoad, request, scopedContext) {
     let loaderResultsPromise = callDataStrategy(
       "loader",
-      state2,
       request,
       matchesToLoad,
       matches,
+      scopedContext,
       null
     );
     let fetcherResultsPromise = Promise.all(
@@ -2057,10 +2108,10 @@ function createRouter(init) {
         if (f.matches && f.match && f.controller) {
           let results = await callDataStrategy(
             "loader",
-            state2,
             createClientSideRequest(init.history, f.path, f.controller.signal),
             [f.match],
             f.matches,
+            scopedContext,
             f.key
           );
           let result = results[f.match.route.id];
@@ -2282,7 +2333,7 @@ function createRouter(init) {
     return null;
   }
   function checkFogOfWar(matches, routesToUse, pathname) {
-    if (patchRoutesOnNavigationImpl) {
+    if (init.patchRoutesOnNavigation) {
       if (!matches) {
         let fogMatches = matchRoutesImpl(
           routesToUse,
@@ -2305,8 +2356,8 @@ function createRouter(init) {
     }
     return { active: false, matches: null };
   }
-  async function discoverRoutes(matches, pathname, signal) {
-    if (!patchRoutesOnNavigationImpl) {
+  async function discoverRoutes(matches, pathname, signal, fetcherKey) {
+    if (!init.patchRoutesOnNavigation) {
       return { type: "success", matches };
     }
     let partialMatches = matches;
@@ -2315,10 +2366,11 @@ function createRouter(init) {
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let localManifest = manifest;
       try {
-        await patchRoutesOnNavigationImpl({
+        await init.patchRoutesOnNavigation({
           signal,
           path: pathname,
           matches: partialMatches,
+          fetcherKey,
           patch: (routeId, children) => {
             if (signal.aborted) return;
             patchRoutesImpl(
@@ -2803,20 +2855,127 @@ async function loadLazyRouteModule(route, mapRouteProperties2, manifest) {
     lazy: void 0
   });
 }
-async function defaultDataStrategy({
-  matches
-}) {
-  let matchesToLoad = matches.filter((m) => m.shouldLoad);
+async function defaultDataStrategy(args) {
+  let matchesToLoad = args.matches.filter((m) => m.shouldLoad);
+  let keyedResults = {};
   let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));
-  return results.reduce(
-    (acc, result, i) => Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
-    {}
+  results.forEach((result, i) => {
+    keyedResults[matchesToLoad[i].route.id] = result;
+  });
+  return keyedResults;
+}
+async function defaultDataStrategyWithMiddleware(args) {
+  if (!args.matches.some((m) => m.route.unstable_middleware)) {
+    return defaultDataStrategy(args);
+  }
+  return runMiddlewarePipeline(
+    args,
+    false,
+    () => defaultDataStrategy(args),
+    (e) => ({ [e.routeId]: { type: "error", result: e.error } })
   );
 }
-async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, requestContext) {
+async function runMiddlewarePipeline(args, propagateResult, handler, errorHandler) {
+  let { matches, request, params, context } = args;
+  let middlewareState = {
+    handlerResult: void 0,
+    propagateResult
+  };
+  try {
+    let tuples = matches.flatMap(
+      (m) => m.route.unstable_middleware ? m.route.unstable_middleware.map((fn) => [m.route.id, fn]) : []
+    );
+    let result = await callRouteMiddleware(
+      { request, params, context },
+      tuples,
+      middlewareState,
+      handler
+    );
+    return middlewareState.propagateResult ? result : middlewareState.handlerResult;
+  } catch (e) {
+    if (!(e instanceof MiddlewareError)) {
+      throw e;
+    }
+    let result = await errorHandler(e);
+    if (propagateResult || !middlewareState.handlerResult) {
+      return result;
+    }
+    return Object.assign(middlewareState.handlerResult, result);
+  }
+}
+var MiddlewareError = class {
+  constructor(routeId, error) {
+    this.routeId = routeId;
+    this.error = error;
+  }
+};
+async function callRouteMiddleware(args, middlewares, middlewareState, handler, idx = 0) {
+  let { request } = args;
+  if (request.signal.aborted) {
+    if (request.signal.reason) {
+      throw request.signal.reason;
+    }
+    throw new Error(
+      `Request aborted without an \`AbortSignal.reason\`: ${request.method} ${request.url}`
+    );
+  }
+  let tuple = middlewares[idx];
+  if (!tuple) {
+    middlewareState.handlerResult = await handler();
+    return middlewareState.handlerResult;
+  }
+  let [routeId, middleware] = tuple;
+  let nextCalled = false;
+  let nextResult = void 0;
+  let next = async () => {
+    if (nextCalled) {
+      throw new Error("You may only call `next()` once per middleware");
+    }
+    nextCalled = true;
+    let result = await callRouteMiddleware(
+      args,
+      middlewares,
+      middlewareState,
+      handler,
+      idx + 1
+    );
+    if (middlewareState.propagateResult) {
+      nextResult = result;
+      return nextResult;
+    }
+  };
+  try {
+    let result = await middleware(
+      {
+        request: args.request,
+        params: args.params,
+        context: args.context
+      },
+      next
+    );
+    if (nextCalled) {
+      if (result === void 0) {
+        return nextResult;
+      } else {
+        return result;
+      }
+    } else {
+      return next();
+    }
+  } catch (e) {
+    if (e instanceof MiddlewareError) {
+      throw e;
+    }
+    throw new MiddlewareError(routeId, e);
+  }
+}
+async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, scopedContext, enableMiddleware) {
   let loadRouteDefinitionsPromises = matches.map(
     (m) => m.route.lazy ? loadLazyRouteModule(m.route, mapRouteProperties2, manifest) : void 0
   );
+  if (enableMiddleware) {
+    await Promise.all(loadRouteDefinitionsPromises);
+  }
   let dsMatches = matches.map((match, i) => {
     let loadRoutePromise = loadRouteDefinitionsPromises[i];
     let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);
@@ -2830,7 +2989,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
         match,
         loadRoutePromise,
         handlerOverride,
-        requestContext
+        scopedContext
       ) : Promise.resolve({ type: "data" /* data */, result: void 0 });
     };
     return {
@@ -2844,7 +3003,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
     request,
     params: matches[0].params,
     fetcherKey,
-    context: requestContext
+    context: scopedContext
   });
   try {
     await Promise.all(loadRouteDefinitionsPromises);
@@ -2852,7 +3011,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
   }
   return results;
 }
-async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {
+async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, scopedContext) {
   let result;
   let onReject;
   let runHandler = (handler) => {
@@ -2872,7 +3031,7 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
         {
           request,
           params: match.params,
-          context: staticContext
+          context: scopedContext
         },
         ...ctx !== void 0 ? [ctx] : []
       );
@@ -4353,55 +4512,61 @@ async function createRequestInit(request) {
 
 // lib/dom/ssr/single-fetch.tsx
 var SingleFetchRedirectSymbol = Symbol("SingleFetchRedirect");
-function getSingleFetchDataStrategy(manifest, routeModules, ssr, getRouter) {
-  return async ({ request, matches, fetcherKey }) => {
+function getSingleFetchDataStrategy(manifest, routeModules, ssr, basename, getRouter) {
+  return async (args) => {
+    let { request, matches, fetcherKey } = args;
     if (request.method !== "GET") {
-      return singleFetchActionStrategy(request, matches);
+      return runMiddlewarePipeline(
+        args,
+        false,
+        () => singleFetchActionStrategy(request, matches, basename),
+        (e) => ({ [e.routeId]: { type: "error", result: e.error } })
+      );
     }
     if (!ssr) {
       let foundRevalidatingServerLoader = matches.some(
         (m) => m.shouldLoad && manifest.routes[m.route.id]?.hasLoader && !manifest.routes[m.route.id]?.hasClientLoader
       );
       if (!foundRevalidatingServerLoader) {
-        let matchesToLoad = matches.filter((m) => m.shouldLoad);
-        let url = stripIndexParam(singleFetchUrl(request.url));
-        let init = await createRequestInit(request);
-        let results = {};
-        await Promise.all(
-          matchesToLoad.map(
-            (m) => m.resolve(async (handler) => {
-              try {
-                let result = manifest.routes[m.route.id]?.hasClientLoader ? await fetchSingleLoader(handler, url, init, m.route.id) : await handler();
-                results[m.route.id] = { type: "data", result };
-              } catch (e) {
-                results[m.route.id] = { type: "error", result: e };
-              }
-            })
-          )
+        return runMiddlewarePipeline(
+          args,
+          false,
+          () => nonSsrStrategy(manifest, request, matches, basename),
+          (e) => ({ [e.routeId]: { type: "error", result: e.error } })
         );
-        return results;
       }
     }
     if (fetcherKey) {
-      return singleFetchLoaderFetcherStrategy(request, matches);
+      return runMiddlewarePipeline(
+        args,
+        false,
+        () => singleFetchLoaderFetcherStrategy(request, matches, basename),
+        (e) => ({ [e.routeId]: { type: "error", result: e.error } })
+      );
     }
-    return singleFetchLoaderNavigationStrategy(
-      manifest,
-      routeModules,
-      ssr,
-      getRouter(),
-      request,
-      matches
+    return runMiddlewarePipeline(
+      args,
+      false,
+      () => singleFetchLoaderNavigationStrategy(
+        manifest,
+        routeModules,
+        ssr,
+        getRouter(),
+        request,
+        matches,
+        basename
+      ),
+      (e) => ({ [e.routeId]: { type: "error", result: e.error } })
     );
   };
 }
-async function singleFetchActionStrategy(request, matches) {
+async function singleFetchActionStrategy(request, matches, basename) {
   let actionMatch = matches.find((m) => m.shouldLoad);
   invariant2(actionMatch, "No action match found");
   let actionStatus = void 0;
   let result = await actionMatch.resolve(async (handler) => {
     let result2 = await handler(async () => {
-      let url = singleFetchUrl(request.url);
+      let url = singleFetchUrl(request.url, basename);
       let init = await createRequestInit(request);
       let { data: data2, status } = await fetchAndDecode(url, init);
       actionStatus = status;
@@ -4422,13 +4587,35 @@ async function singleFetchActionStrategy(request, matches) {
     }
   };
 }
-async function singleFetchLoaderNavigationStrategy(manifest, routeModules, ssr, router2, request, matches) {
+async function nonSsrStrategy(manifest, request, matches, basename) {
+  let matchesToLoad = matches.filter((m) => m.shouldLoad);
+  let url = stripIndexParam(singleFetchUrl(request.url, basename));
+  let init = await createRequestInit(request);
+  let results = {};
+  await Promise.all(
+    matchesToLoad.map(
+      (m) => m.resolve(async (handler) => {
+        try {
+          let result = manifest.routes[m.route.id]?.hasClientLoader ? await fetchSingleLoader(handler, url, init, m.route.id) : await handler();
+          results[m.route.id] = { type: "data", result };
+        } catch (e) {
+          results[m.route.id] = { type: "error", result: e };
+        }
+      })
+    )
+  );
+  return results;
+}
+function isOptedOut(manifestRoute, routeModule, match, router2) {
+  return match.route.id in router2.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModule && routeModule.shouldRevalidate;
+}
+async function singleFetchLoaderNavigationStrategy(manifest, routeModules, ssr, router2, request, matches, basename) {
   let routesParams = /* @__PURE__ */ new Set();
   let foundOptOutRoute = false;
   let routeDfds = matches.map(() => createDeferred2());
   let routesLoadedPromise = Promise.all(routeDfds.map((d) => d.promise));
   let singleFetchDfd = createDeferred2();
-  let url = stripIndexParam(singleFetchUrl(request.url));
+  let url = stripIndexParam(singleFetchUrl(request.url, basename));
   let init = await createRequestInit(request);
   let results = {};
   let resolvePromise = Promise.all(
@@ -4440,7 +4627,7 @@ async function singleFetchLoaderNavigationStrategy(manifest, routeModules, ssr,
           if (!router2.state.initialized) {
             return;
           }
-          if (m.route.id in router2.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModules[m.route.id]?.shouldRevalidate) {
+          if (isOptedOut(manifestRoute, routeModules[m.route.id], m, router2)) {
             foundOptOutRoute = true;
             return;
           }
@@ -4503,11 +4690,11 @@ async function singleFetchLoaderNavigationStrategy(manifest, routeModules, ssr,
   await resolvePromise;
   return results;
 }
-async function singleFetchLoaderFetcherStrategy(request, matches) {
+async function singleFetchLoaderFetcherStrategy(request, matches, basename) {
   let fetcherMatch = matches.find((m) => m.shouldLoad);
   invariant2(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);
   });
@@ -4535,7 +4722,7 @@ function stripIndexParam(url) {
   }
   return url;
 }
-function singleFetchUrl(reqUrl) {
+function singleFetchUrl(reqUrl, basename) {
   let url = typeof reqUrl === "string" ? new URL(
     reqUrl,
     // This can be called during the SSR flow via PrefetchPageLinksImpl so
@@ -4544,6 +4731,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   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`;
   }
@@ -4895,6 +5084,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
       Object.assign(dataRoute, {
         ...dataRoute,
         ...getRouteComponents(route, routeModule, isSpaMode),
+        unstable_middleware: routeModule.unstable_clientMiddleware,
         handle: routeModule.handle,
         shouldRevalidate: getShouldRevalidateFunction(
           routeModule,
@@ -4908,7 +5098,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
       let hasInitialError = initialState && initialState.errors && route.id in initialState.errors;
       let initialError = hasInitialError ? initialState?.errors?.[route.id] : void 0;
       let isHydrationRequest = needsRevalidation == null && (routeModule.clientLoader?.hydrate === true || !route.hasLoader);
-      dataRoute.loader = async ({ request, params }, singleFetch) => {
+      dataRoute.loader = async ({ request, params, context }, singleFetch) => {
         try {
           let result = await prefetchStylesAndCallHandler(async () => {
             invariant2(
@@ -4921,6 +5111,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
             return routeModule.clientLoader({
               request,
               params,
+              context,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route);
                 if (isHydrationRequest) {
@@ -4945,7 +5136,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         routeModule,
         isSpaMode
       );
-      dataRoute.action = ({ request, params }, singleFetch) => {
+      dataRoute.action = ({ request, params, context }, singleFetch) => {
         return prefetchStylesAndCallHandler(async () => {
           invariant2(
             routeModule,
@@ -4960,6 +5151,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
           return routeModule.clientAction({
             request,
             params,
+            context,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route);
               return fetchServerAction(singleFetch);
@@ -4969,7 +5161,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
       };
     } else {
       if (!route.hasClientLoader) {
-        dataRoute.loader = ({ request }, singleFetch) => prefetchStylesAndCallHandler(() => {
+        dataRoute.loader = (_, singleFetch) => prefetchStylesAndCallHandler(() => {
           return fetchServerLoader(singleFetch);
         });
       } else if (route.clientLoaderModule) {
@@ -4990,7 +5182,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         };
       }
       if (!route.hasClientAction) {
-        dataRoute.action = ({ request }, singleFetch) => prefetchStylesAndCallHandler(() => {
+        dataRoute.action = (_, singleFetch) => prefetchStylesAndCallHandler(() => {
           if (isSpaMode) {
             throw noActionDefinedError("clientAction", route.id);
           }
@@ -5048,6 +5240,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         return {
           ...lazyRoute.loader ? { loader: lazyRoute.loader } : {},
           ...lazyRoute.action ? { action: lazyRoute.action } : {},
+          unstable_middleware: mod.unstable_clientMiddleware,
           hasErrorBoundary: lazyRoute.hasErrorBoundary,
           shouldRevalidate: getShouldRevalidateFunction(
             lazyRoute,
@@ -5120,6 +5313,7 @@ async function loadRouteModuleWithBlockingLinks(route, routeModules) {
   return {
     Component: getRouteModuleComponent(routeModule),
     ErrorBoundary: routeModule.ErrorBoundary,
+    unstable_clientMiddleware: routeModule.unstable_clientMiddleware,
     clientAction: routeModule.clientAction,
     clientLoader: routeModule.clientLoader,
     handle: routeModule.handle,
@@ -5175,12 +5369,13 @@ function getPatchRoutesOnNavigationFunction(manifest, routeModules, ssr, isSpaMo
   if (!isFogOfWarEnabled(ssr)) {
     return void 0;
   }
-  return async ({ path, patch, signal }) => {
+  return async ({ path, patch, signal, fetcherKey }) => {
     if (discoveredPaths.has(path)) {
       return;
     }
     await fetchAndApplyManifestPatches(
       [path],
+      fetcherKey ? window.location.href : path,
       manifest,
       routeModules,
       ssr,
@@ -5221,6 +5416,7 @@ function useFogOFWarDiscovery(router2, manifest, routeModules, ssr, isSpaMode) {
       try {
         await fetchAndApplyManifestPatches(
           lazyPaths,
+          null,
           manifest,
           routeModules,
           ssr,
@@ -5244,7 +5440,8 @@ function useFogOFWarDiscovery(router2, manifest, routeModules, ssr, isSpaMode) {
     return () => observer.disconnect();
   }, [ssr, isSpaMode, manifest, routeModules, router2]);
 }
-async function fetchAndApplyManifestPatches(paths, manifest, routeModules, ssr, isSpaMode, basename, patchRoutes, signal) {
+var MANIFEST_VERSION_STORAGE_KEY = "react-router-manifest-version";
+async function fetchAndApplyManifestPatches(paths, errorReloadPath, manifest, routeModules, ssr, isSpaMode, basename, patchRoutes, signal) {
   let manifestPath = `${basename != null ? basename : "/"}/__manifest`.replace(
     /\/+/g,
     "/"
@@ -5261,9 +5458,26 @@ async function fetchAndApplyManifestPatches(paths, manifest, routeModules, ssr,
     let res = await fetch(url, { signal });
     if (!res.ok) {
       throw new Error(`${res.status} ${res.statusText}`);
+    } else if (res.status === 204 && res.headers.has("X-Remix-Reload-Document")) {
+      if (!errorReloadPath) {
+        console.warn(
+          "Detected a manifest version mismatch during eager route discovery. The next navigation/fetch to an undiscovered route will result in a new document navigation to sync up with the latest manifest."
+        );
+        return;
+      }
+      if (sessionStorage.getItem(MANIFEST_VERSION_STORAGE_KEY) === manifest.version) {
+        console.error(
+          "Unable to discover routes due to manifest version mismatch."
+        );
+        return;
+      }
+      sessionStorage.setItem(MANIFEST_VERSION_STORAGE_KEY, manifest.version);
+      window.location.href = errorReloadPath;
+      throw new Error("Detected manifest version mismatch, reloading...");
     } else if (res.status >= 400) {
       throw new Error(await res.text());
     }
+    sessionStorage.removeItem(MANIFEST_VERSION_STORAGE_KEY);
     serverPatches = await res.json();
   } catch (e) {
     if (signal?.aborted) return;
@@ -5519,7 +5733,9 @@ function initSsrInfo() {
     };
   }
 }
-function createHydratedRouter() {
+function createHydratedRouter({
+  unstable_getContext
+}) {
   initSsrInfo();
   if (!ssrInfo) {
     throw new Error(
@@ -5589,12 +5805,17 @@ function createHydratedRouter() {
     routes,
     history: createBrowserHistory(),
     basename: ssrInfo.context.basename,
+    unstable_getContext,
     hydrationData,
     mapRouteProperties,
+    future: {
+      unstable_middleware: ssrInfo.context.future.unstable_middleware
+    },
     dataStrategy: getSingleFetchDataStrategy(
       ssrInfo.manifest,
       ssrInfo.routeModules,
       ssrInfo.context.ssr,
+      ssrInfo.context.basename,
       () => router2
     ),
     patchRoutesOnNavigation: getPatchRoutesOnNavigationFunction(
@@ -5615,9 +5836,11 @@ function createHydratedRouter() {
   window.__reactRouterDataRouter = router2;
   return router2;
 }
-function HydratedRouter() {
+function HydratedRouter(props) {
   if (!router) {
-    router = createHydratedRouter();
+    router = createHydratedRouter({
+      unstable_getContext: props.unstable_getContext
+    });
   }
   let [criticalCss, setCriticalCss] = React11.useState(
     process.env.NODE_ENV === "development" ? ssrInfo?.context.criticalCss : void 0