react-router 7.9.1 → 7.9.2-pre.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # `react-router`
 
+## 7.9.2-pre.0
+
+### Patch Changes
+
+- - Update client-side router to run client `middleware` on initial load even if no loaders exist ([#14348](https://github.com/remix-run/react-router/pull/14348))
+  - Update `createRoutesStub` to run route middleware
+    - You will need to set the `<RoutesStub future={{ v8_middleware: true }} />` flag to enable the proper `context` type
+- Update Lazy Route Discovery manifest requests to use a singular comma-separated `paths` query param instead of repeated `p` query params ([#14321](https://github.com/remix-run/react-router/pull/14321))
+  - This is because Cloudflare has a hard limit of 100 URL search param key/value pairs when used as a key for caching purposes
+  - If more that 100 paths were included, the cache key would be incomplete and could produce false-positive cache hits
+
+- [UNSTABLE] Add `fetcher.unstable_reset()` API ([#14206](https://github.com/remix-run/react-router/pull/14206))
+- Made useOutlet element reference have stable identity in-between route chages ([#13382](https://github.com/remix-run/react-router/pull/13382))
+- In RSC Data Mode, handle SSR'd client errors and re-try in the browser ([#14342](https://github.com/remix-run/react-router/pull/14342))
+- Support `middleware` prop on `<Route>` for usage with a data router via `createRoutesFromElements` ([#14357](https://github.com/remix-run/react-router/pull/14357))
+- Handle encoded question mark and hash characters in ancestor splat routes ([#14249](https://github.com/remix-run/react-router/pull/14249))
+- Fail gracefully on manifest version mismatch logic if `sessionStorage` access is blocked ([#14335](https://github.com/remix-run/react-router/pull/14335))
+
 ## 7.9.1
 
 ### Patch Changes
@@ -13,7 +31,6 @@
 - Stabilize middleware and context APIs. ([#14215](https://github.com/remix-run/react-router/pull/14215))
 
   We have removed the `unstable_` prefix from the following APIs and they are now considered stable and ready for production use:
-
   - [`RouterContextProvider`](https://reactrouter.com/api/utils/RouterContextProvider)
   - [`createContext`](https://reactrouter.com/api/utils/createContext)
   - `createBrowserRouter` [`getContext`](https://reactrouter.com/api/data-routers/createBrowserRouter#optsgetcontext) option
@@ -40,7 +57,7 @@
 
 - \[UNSTABLE] Add `<RouterProvider unstable_onError>`/`<HydratedRouter unstable_onError>` prop for client side error reporting ([#14162](https://github.com/remix-run/react-router/pull/14162))
 
-- server action revalidation opt out via $SKIP\_REVALIDATION field ([#14154](https://github.com/remix-run/react-router/pull/14154))
+- server action revalidation opt out via $SKIP_REVALIDATION field ([#14154](https://github.com/remix-run/react-router/pull/14154))
 
 - Properly escape interpolated param values in `generatePath()` ([#13530](https://github.com/remix-run/react-router/pull/13530))
 
@@ -89,7 +106,6 @@
 - Remove dependency on `@types/node` in TypeScript declaration files ([#14059](https://github.com/remix-run/react-router/pull/14059))
 
 - Fix types for `UIMatch` to reflect that the `loaderData`/`data` properties may be `undefined` ([#12206](https://github.com/remix-run/react-router/pull/12206))
-
   - When an `ErrorBoundary` is being rendered, not all active matches will have loader data available, since it may have been their `loader` that threw to trigger the boundary
   - The `UIMatch.data` type was not correctly handing this and would always reflect the presence of data, leading to the unexpected runtime errors when an `ErrorBoundary` was rendered
   - ⚠️ This may cause some type errors to show up in your code for unguarded `match.data` accesses - you should properly guard for `undefined` values in those scenarios.
@@ -123,7 +139,6 @@
 - \[UNSTABLE] When middleware is enabled, make the `context` parameter read-only (via `Readonly<unstable_RouterContextProvider>`) so that TypeScript will not allow you to write arbitrary fields to it in loaders, actions, or middleware. ([#14097](https://github.com/remix-run/react-router/pull/14097))
 
 - \[UNSTABLE] Rename and alter the signature/functionality of the `unstable_respond` API in `staticHandler.query`/`staticHandler.queryRoute` ([#14103](https://github.com/remix-run/react-router/pull/14103))
-
   - The API has been renamed to `unstable_generateMiddlewareResponse` for clarity
   - The main functional change is that instead of running the loaders/actions before calling `unstable_respond` and handing you the result, we now pass a `query`/`queryRoute` function as a parameter and you execute the loaders/actions inside your callback, giving you full access to pre-processing and error handling
   - The `query` version of the API now has a signature of `(query: (r: Request) => Promise<StaticHandlerContext | Response>) => Promise<Response>`
@@ -769,7 +784,6 @@
   ```
 
   Similar to server-side requests, a fresh `context` will be created per navigation (or `fetcher` call). If you have initial data you'd like to populate in the context for every request, you can provide an `unstable_getContext` function at the root of your app:
-
   - Library mode - `createBrowserRouter(routes, { unstable_getContext })`
   - Framework mode - `<HydratedRouter unstable_getContext>`
 
@@ -957,7 +971,6 @@ _No changes_
 - Remove `future.v7_normalizeFormMethod` future flag ([#11697](https://github.com/remix-run/react-router/pull/11697))
 
 - For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](https://github.com/remix-run/react-router/pull/11837))
-
   - `createCookie`
   - `createCookieSessionStorage`
   - `createMemorySessionStorage`
@@ -966,7 +979,6 @@ _No changes_
   For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html)
 
   Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
-
   - `createCookieFactory`
   - `createSessionStorageFactory`
   - `createCookieSessionStorageFactory`
@@ -1122,7 +1134,6 @@ _No changes_
   ```
 
   This initial implementation targets type inference for:
-
   - `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
   - `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
   - `ActionData` : Action data from `action` and/or `clientAction` within your route module
@@ -1137,7 +1148,6 @@ _No changes_
   ```
 
   Check out our docs for more:
-
   - [_Explanations > Type Safety_](https://reactrouter.com/dev/guides/explanation/type-safety)
   - [_How-To > Setting up type safety_](https://reactrouter.com/dev/guides/how-to/setting-up-type-safety)
 

package/dist/development/{chunk-PW3F6ATG.js → chunk-ED2JHW2I.js}

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }/**
- * react-router v7.9.1
+ * react-router v7.9.2-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1054,7 +1054,7 @@ function createRouter(init) {
       }
     } else if (initialMatches.some((m) => m.route.lazy)) {
       initialized = false;
-    } else if (!initialMatches.some((m) => m.route.loader)) {
+    } else if (!initialMatches.some((m) => routeHasLoaderOrMiddleware(m.route))) {
       initialized = true;
     } else {
       let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
@@ -1756,7 +1756,9 @@ function createRouter(init) {
       pendingActionResult
     );
     pendingNavigationLoadId = ++incrementingLoadId;
-    if (!init.dataStrategy && !dsMatches.some((m) => m.shouldLoad) && !dsMatches.some((m) => m.route.middleware) && revalidatingFetchers.length === 0) {
+    if (!init.dataStrategy && !dsMatches.some((m) => m.shouldLoad) && !dsMatches.some(
+      (m) => m.route.middleware && m.route.middleware.length > 0
+    ) && revalidatingFetchers.length === 0) {
       let updatedFetchers2 = markFetchRedirectsDone();
       completeNavigation(
         location,
@@ -2437,6 +2439,10 @@ function createRouter(init) {
     }
     return state.fetchers.get(key) || IDLE_FETCHER;
   }
+  function resetFetcher(key, opts) {
+    abortFetcher(key, _optionalChain([opts, 'optionalAccess', _15 => _15.reason]));
+    updateFetcherState(key, getDoneFetcher(null));
+  }
   function deleteFetcher(key) {
     let fetcher = state.fetchers.get(key);
     if (fetchControllers.has(key) && !(fetcher && fetcher.state === "loading" && fetchReloadIds.has(key))) {
@@ -2459,10 +2465,10 @@ function createRouter(init) {
     }
     updateState({ fetchers: new Map(state.fetchers) });
   }
-  function abortFetcher(key) {
+  function abortFetcher(key, reason) {
     let controller = fetchControllers.get(key);
     if (controller) {
-      controller.abort();
+      controller.abort(reason);
       fetchControllers.delete(key);
     }
   }
@@ -2726,6 +2732,7 @@ function createRouter(init) {
     createHref: (to) => init.history.createHref(to),
     encodeLocation: (to) => init.history.encodeLocation(to),
     getFetcher,
+    resetFetcher,
     deleteFetcher: queueFetcherForDeletion,
     dispose,
     getBlocker,
@@ -2748,7 +2755,7 @@ function createStaticHandler(routes, opts) {
   );
   let manifest = {};
   let basename = (opts ? opts.basename : null) || "/";
-  let mapRouteProperties = _optionalChain([opts, 'optionalAccess', _15 => _15.mapRouteProperties]) || defaultMapRouteProperties;
+  let mapRouteProperties = _optionalChain([opts, 'optionalAccess', _16 => _16.mapRouteProperties]) || defaultMapRouteProperties;
   let dataRoutes = convertRoutesToDataRoutes(
     routes,
     mapRouteProperties,
@@ -2881,9 +2888,9 @@ function createStaticHandler(routes, opts) {
             } else {
               let boundaryRouteId = skipLoaderErrorBubbling ? routeId : findNearestBoundary(
                 matches,
-                _optionalChain([matches, 'access', _16 => _16.find, 'call', _17 => _17(
+                _optionalChain([matches, 'access', _17 => _17.find, 'call', _18 => _18(
                   (m) => m.route.id === routeId || m.route.loader
-                ), 'optionalAccess', _18 => _18.route, 'access', _19 => _19.id]) || routeId
+                ), 'optionalAccess', _19 => _19.route, 'access', _20 => _20.id]) || routeId
               ).route.id;
               let staticContext = {
                 matches,
@@ -3215,11 +3222,11 @@ function createStaticHandler(routes, opts) {
   }
   async function loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch, filterMatchesToLoad, pendingActionResult) {
     let isRouteRequest = routeMatch != null;
-    if (isRouteRequest && !_optionalChain([routeMatch, 'optionalAccess', _20 => _20.route, 'access', _21 => _21.loader]) && !_optionalChain([routeMatch, 'optionalAccess', _22 => _22.route, 'access', _23 => _23.lazy])) {
+    if (isRouteRequest && !_optionalChain([routeMatch, 'optionalAccess', _21 => _21.route, 'access', _22 => _22.loader]) && !_optionalChain([routeMatch, 'optionalAccess', _23 => _23.route, 'access', _24 => _24.lazy])) {
       throw getInternalRouterError(400, {
         method: request.method,
         pathname: new URL(request.url).pathname,
-        routeId: _optionalChain([routeMatch, 'optionalAccess', _24 => _24.route, 'access', _25 => _25.id])
+        routeId: _optionalChain([routeMatch, 'optionalAccess', _25 => _25.route, 'access', _26 => _26.id])
       });
     }
     let dsMatches;
@@ -3527,7 +3534,7 @@ function getMatchesToLoad(request, scopedContext, mapRouteProperties, manifest,
   let shouldSkipRevalidation = actionStatus && actionStatus >= 400;
   let baseShouldRevalidateArgs = {
     currentUrl,
-    currentParams: _optionalChain([state, 'access', _26 => _26.matches, 'access', _27 => _27[0], 'optionalAccess', _28 => _28.params]) || {},
+    currentParams: _optionalChain([state, 'access', _27 => _27.matches, 'access', _28 => _28[0], 'optionalAccess', _29 => _29.params]) || {},
     nextUrl,
     nextParams: matches[0].params,
     ...submission,
@@ -3541,7 +3548,7 @@ function getMatchesToLoad(request, scopedContext, mapRouteProperties, manifest,
       forceShouldLoad = false;
     } else if (route.lazy) {
       forceShouldLoad = true;
-    } else if (route.loader == null) {
+    } else if (!routeHasLoaderOrMiddleware(route)) {
       forceShouldLoad = false;
     } else if (initialHydration) {
       forceShouldLoad = shouldLoadRouteOnHydration(
@@ -3673,11 +3680,14 @@ function getMatchesToLoad(request, scopedContext, mapRouteProperties, manifest,
   });
   return { dsMatches, revalidatingFetchers };
 }
+function routeHasLoaderOrMiddleware(route) {
+  return route.loader != null || route.middleware != null && route.middleware.length > 0;
+}
 function shouldLoadRouteOnHydration(route, loaderData, errors) {
   if (route.lazy) {
     return true;
   }
-  if (!route.loader) {
+  if (!routeHasLoaderOrMiddleware(route)) {
     return false;
   }
   let hasData = loaderData != null && route.id in loaderData;
@@ -3748,7 +3758,7 @@ function patchRoutesImpl(routeId, children, routesToUse, manifest, mapRoutePrope
     let newRoutes = convertRoutesToDataRoutes(
       uniqueChildren,
       mapRouteProperties,
-      [routeId || "_", "patch", String(_optionalChain([childrenToPatch, 'optionalAccess', _29 => _29.length]) || "0")],
+      [routeId || "_", "patch", String(_optionalChain([childrenToPatch, 'optionalAccess', _30 => _30.length]) || "0")],
       manifest
     );
     childrenToPatch.push(...newRoutes);
@@ -3785,7 +3795,7 @@ function isSameRoute(newRoute, existingRoute) {
     return true;
   }
   return newRoute.children.every(
-    (aChild, i) => _optionalChain([existingRoute, 'access', _30 => _30.children, 'optionalAccess', _31 => _31.some, 'call', _32 => _32((bChild) => isSameRoute(aChild, bChild))])
+    (aChild, i) => _optionalChain([existingRoute, 'access', _31 => _31.children, 'optionalAccess', _32 => _32.some, 'call', _33 => _33((bChild) => isSameRoute(aChild, bChild))])
   );
 }
 var lazyRoutePropertyCache = /* @__PURE__ */ new WeakMap();
@@ -3933,9 +3943,9 @@ function loadLazyRoute(route, type, manifest, mapRouteProperties, lazyRoutePrope
   }
   let lazyRoutePromise = lazyPropertyPromises.length > 0 ? Promise.all(lazyPropertyPromises).then(() => {
   }) : void 0;
-  _optionalChain([lazyRoutePromise, 'optionalAccess', _33 => _33.catch, 'call', _34 => _34(() => {
+  _optionalChain([lazyRoutePromise, 'optionalAccess', _34 => _34.catch, 'call', _35 => _35(() => {
   })]);
-  _optionalChain([lazyHandlerPromise, 'optionalAccess', _35 => _35.catch, 'call', _36 => _36(() => {
+  _optionalChain([lazyHandlerPromise, 'optionalAccess', _36 => _36.catch, 'call', _37 => _37(() => {
   })]);
   return {
     lazyRoutePromise,
@@ -4006,9 +4016,15 @@ function runClientMiddlewarePipeline(args, handler) {
       let { matches } = args;
       let maxBoundaryIdx = Math.min(
         // Throwing route
-        matches.findIndex((m) => m.route.id === routeId) || 0,
+        Math.max(
+          matches.findIndex((m) => m.route.id === routeId),
+          0
+        ),
         // or the shallowest route that needs to load data
-        matches.findIndex((m) => m.unstable_shouldCallHandler()) || 0
+        Math.max(
+          matches.findIndex((m) => m.unstable_shouldCallHandler()),
+          0
+        )
       );
       let boundaryRouteId = findNearestBoundary(
         matches,
@@ -4136,8 +4152,8 @@ function getDataStrategyMatch(mapRouteProperties, manifest, request, match, lazy
         return callLoaderOrAction({
           request,
           match,
-          lazyHandlerPromise: _optionalChain([_lazyPromises, 'optionalAccess', _37 => _37.handler]),
-          lazyRoutePromise: _optionalChain([_lazyPromises, 'optionalAccess', _38 => _38.route]),
+          lazyHandlerPromise: _optionalChain([_lazyPromises, 'optionalAccess', _38 => _38.handler]),
+          lazyRoutePromise: _optionalChain([_lazyPromises, 'optionalAccess', _39 => _39.route]),
           handlerOverride,
           scopedContext
         });
@@ -4177,8 +4193,8 @@ function getTargetedDataStrategyMatches(mapRouteProperties, manifest, request, m
   });
 }
 async function callDataStrategyImpl(dataStrategyImpl, request, matches, fetcherKey, scopedContext, isStaticHandler) {
-  if (matches.some((m) => _optionalChain([m, 'access', _39 => _39._lazyPromises, 'optionalAccess', _40 => _40.middleware]))) {
-    await Promise.all(matches.map((m) => _optionalChain([m, 'access', _41 => _41._lazyPromises, 'optionalAccess', _42 => _42.middleware])));
+  if (matches.some((m) => _optionalChain([m, 'access', _40 => _40._lazyPromises, 'optionalAccess', _41 => _41.middleware]))) {
+    await Promise.all(matches.map((m) => _optionalChain([m, 'access', _42 => _42._lazyPromises, 'optionalAccess', _43 => _43.middleware])));
   }
   let dataStrategyArgs = {
     request,
@@ -4212,8 +4228,8 @@ async function callDataStrategyImpl(dataStrategyImpl, request, matches, fetcherK
   try {
     await Promise.all(
       matches.flatMap((m) => [
-        _optionalChain([m, 'access', _43 => _43._lazyPromises, 'optionalAccess', _44 => _44.handler]),
-        _optionalChain([m, 'access', _45 => _45._lazyPromises, 'optionalAccess', _46 => _46.route])
+        _optionalChain([m, 'access', _44 => _44._lazyPromises, 'optionalAccess', _45 => _45.handler]),
+        _optionalChain([m, 'access', _46 => _46._lazyPromises, 'optionalAccess', _47 => _47.route])
       ])
     );
   } catch (e) {
@@ -4356,19 +4372,19 @@ async function convertDataStrategyResultToDataResult(dataStrategyResult) {
         return {
           type: "error" /* error */,
           error: result.data,
-          statusCode: _optionalChain([result, 'access', _47 => _47.init, 'optionalAccess', _48 => _48.status]),
-          headers: _optionalChain([result, 'access', _49 => _49.init, 'optionalAccess', _50 => _50.headers]) ? new Headers(result.init.headers) : void 0
+          statusCode: _optionalChain([result, 'access', _48 => _48.init, 'optionalAccess', _49 => _49.status]),
+          headers: _optionalChain([result, 'access', _50 => _50.init, 'optionalAccess', _51 => _51.headers]) ? new Headers(result.init.headers) : void 0
         };
       }
       return {
         type: "error" /* error */,
         error: new ErrorResponseImpl(
-          _optionalChain([result, 'access', _51 => _51.init, 'optionalAccess', _52 => _52.status]) || 500,
+          _optionalChain([result, 'access', _52 => _52.init, 'optionalAccess', _53 => _53.status]) || 500,
           void 0,
           result.data
         ),
         statusCode: isRouteErrorResponse(result) ? result.status : void 0,
-        headers: _optionalChain([result, 'access', _53 => _53.init, 'optionalAccess', _54 => _54.headers]) ? new Headers(result.init.headers) : void 0
+        headers: _optionalChain([result, 'access', _54 => _54.init, 'optionalAccess', _55 => _55.headers]) ? new Headers(result.init.headers) : void 0
       };
     }
     return {
@@ -4381,8 +4397,8 @@ async function convertDataStrategyResultToDataResult(dataStrategyResult) {
     return {
       type: "data" /* data */,
       data: result.data,
-      statusCode: _optionalChain([result, 'access', _55 => _55.init, 'optionalAccess', _56 => _56.status]),
-      headers: _optionalChain([result, 'access', _57 => _57.init, 'optionalAccess', _58 => _58.headers]) ? new Headers(result.init.headers) : void 0
+      statusCode: _optionalChain([result, 'access', _56 => _56.init, 'optionalAccess', _57 => _57.status]),
+      headers: _optionalChain([result, 'access', _58 => _58.init, 'optionalAccess', _59 => _59.headers]) ? new Headers(result.init.headers) : void 0
     };
   }
   return { type: "data" /* data */, data: result };
@@ -4531,7 +4547,7 @@ function processLoaderData(state, matches, results, pendingActionResult, revalid
     let result = fetcherResults[key];
     invariant(result, "Did not find corresponding fetcher result");
     if (isErrorResult(result)) {
-      let boundaryMatch = findNearestBoundary(state.matches, _optionalChain([match, 'optionalAccess', _59 => _59.route, 'access', _60 => _60.id]));
+      let boundaryMatch = findNearestBoundary(state.matches, _optionalChain([match, 'optionalAccess', _60 => _60.route, 'access', _61 => _61.id]));
       if (!(errors && errors[boundaryMatch.route.id])) {
         errors = {
           ...errors,
@@ -4665,8 +4681,8 @@ function dataWithResponseInitToResponse(data2) {
 }
 function dataWithResponseInitToErrorResponse(data2) {
   return new ErrorResponseImpl(
-    _nullishCoalesce(_optionalChain([data2, 'access', _61 => _61.init, 'optionalAccess', _62 => _62.status]), () => ( 500)),
-    _nullishCoalesce(_optionalChain([data2, 'access', _63 => _63.init, 'optionalAccess', _64 => _64.statusText]), () => ( "Internal Server Error")),
+    _nullishCoalesce(_optionalChain([data2, 'access', _62 => _62.init, 'optionalAccess', _63 => _63.status]), () => ( 500)),
+    _nullishCoalesce(_optionalChain([data2, 'access', _64 => _64.init, 'optionalAccess', _65 => _65.statusText]), () => ( "Internal Server Error")),
     data2.data
   );
 }
@@ -5698,7 +5714,7 @@ function getTurboStreamSingleFetchDataStrategy(getRouter, manifest, routeModules
       return {
         hasLoader: manifestRoute.hasLoader,
         hasClientLoader: manifestRoute.hasClientLoader,
-        hasShouldRevalidate: Boolean(_optionalChain([routeModule, 'optionalAccess', _65 => _65.shouldRevalidate]))
+        hasShouldRevalidate: Boolean(_optionalChain([routeModule, 'optionalAccess', _66 => _66.shouldRevalidate]))
       };
     },
     fetchAndDecodeViaTurboStream,
@@ -5865,7 +5881,7 @@ async function bubbleMiddlewareErrors(singleFetchPromise, matches, routesParams,
           let routeResult = fetchedData.routes[match.route.id];
           if ("error" in routeResult) {
             middlewareError = routeResult.error;
-            if (_optionalChain([results, 'access', _66 => _66[match.route.id], 'optionalAccess', _67 => _67.result]) == null) {
+            if (_optionalChain([results, 'access', _67 => _67[match.route.id], 'optionalAccess', _68 => _68.result]) == null) {
               results[match.route.id] = {
                 type: "error",
                 result: middlewareError
@@ -5978,7 +5994,7 @@ async function fetchAndDecodeViaTurboStream(args, basename, targetRoutes) {
       }
     } else {
       let typed = decoded.value;
-      let routeId = _optionalChain([targetRoutes, 'optionalAccess', _68 => _68[0]]);
+      let routeId = _optionalChain([targetRoutes, 'optionalAccess', _69 => _69[0]]);
       invariant2(routeId, "No routeId found for single fetch call decoding");
       if ("redirect" in typed) {
         data2 = { redirect: typed };
@@ -6234,10 +6250,10 @@ function useOutletContext() {
 }
 function useOutlet(context) {
   let outlet = React3.useContext(RouteContext).outlet;
-  if (outlet) {
-    return /* @__PURE__ */ React3.createElement(OutletContext.Provider, { value: context }, outlet);
-  }
-  return outlet;
+  return React3.useMemo(
+    () => outlet && /* @__PURE__ */ React3.createElement(OutletContext.Provider, { value: context }, outlet),
+    [outlet, context]
+  );
 }
 function useParams() {
   let { matches } = React3.useContext(RouteContext);
@@ -6290,7 +6306,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
   if (locationArg) {
     let parsedLocationArg = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
     invariant(
-      parentPathnameBase === "/" || _optionalChain([parsedLocationArg, 'access', _69 => _69.pathname, 'optionalAccess', _70 => _70.startsWith, 'call', _71 => _71(parentPathnameBase)]),
+      parentPathnameBase === "/" || _optionalChain([parsedLocationArg, 'access', _70 => _70.pathname, 'optionalAccess', _71 => _71.startsWith, 'call', _72 => _72(parentPathnameBase)]),
       `When overriding the location using \`<Routes location>\` or \`useRoutes(routes, location)\`, the location pathname must begin with the portion of the URL pathname that was matched by all parent routes. The current pathname base is "${parentPathnameBase}" but pathname "${parsedLocationArg.pathname}" was given in the \`location\` prop.`
     );
     location = parsedLocationArg;
@@ -6321,13 +6337,23 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         params: Object.assign({}, parentParams, match.params),
         pathname: joinPaths([
           parentPathnameBase,
-          // Re-encode pathnames that were decoded inside matchRoutes
-          navigator.encodeLocation ? navigator.encodeLocation(match.pathname).pathname : match.pathname
+          // Re-encode pathnames that were decoded inside matchRoutes.
+          // Pre-encode `?` and `#` ahead of `encodeLocation` because it uses
+          // `new URL()` internally and we need to prevent it from treating
+          // them as separators
+          navigator.encodeLocation ? navigator.encodeLocation(
+            match.pathname.replace(/\?/g, "%3F").replace(/#/g, "%23")
+          ).pathname : match.pathname
         ]),
         pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([
           parentPathnameBase,
           // Re-encode pathnames that were decoded inside matchRoutes
-          navigator.encodeLocation ? navigator.encodeLocation(match.pathnameBase).pathname : match.pathnameBase
+          // Pre-encode `?` and `#` ahead of `encodeLocation` because it uses
+          // `new URL()` internally and we need to prevent it from treating
+          // them as separators
+          navigator.encodeLocation ? navigator.encodeLocation(
+            match.pathnameBase.replace(/\?/g, "%3F").replace(/#/g, "%23")
+          ).pathname : match.pathnameBase
         ])
       })
     ),
@@ -6442,10 +6468,10 @@ function _renderMatches(matches, parentMatches = [], dataRouterState = null, uns
     }
   }
   let renderedMatches = matches;
-  let errors = _optionalChain([dataRouterState, 'optionalAccess', _72 => _72.errors]);
+  let errors = _optionalChain([dataRouterState, 'optionalAccess', _73 => _73.errors]);
   if (errors != null) {
     let errorIndex = renderedMatches.findIndex(
-      (m) => m.route.id && _optionalChain([errors, 'optionalAccess', _73 => _73[m.route.id]]) !== void 0
+      (m) => m.route.id && _optionalChain([errors, 'optionalAccess', _74 => _74[m.route.id]]) !== void 0
     );
     invariant(
       errorIndex >= 0,
@@ -6623,15 +6649,15 @@ function useRouteError() {
   if (error !== void 0) {
     return error;
   }
-  return _optionalChain([state, 'access', _74 => _74.errors, 'optionalAccess', _75 => _75[routeId]]);
+  return _optionalChain([state, 'access', _75 => _75.errors, 'optionalAccess', _76 => _76[routeId]]);
 }
 function useAsyncValue() {
   let value = React3.useContext(AwaitContext);
-  return _optionalChain([value, 'optionalAccess', _76 => _76._data]);
+  return _optionalChain([value, 'optionalAccess', _77 => _77._data]);
 }
 function useAsyncError() {
   let value = React3.useContext(AwaitContext);
-  return _optionalChain([value, 'optionalAccess', _77 => _77._error]);
+  return _optionalChain([value, 'optionalAccess', _78 => _78._error]);
 }
 var blockerId = 0;
 function useBlocker(shouldBlock) {
@@ -6743,7 +6769,7 @@ function getKeyedLinksForMatches(matches, routeModules, manifest) {
     let route = manifest.routes[match.route.id];
     return [
       route && route.css ? route.css.map((href) => ({ rel: "stylesheet", href })) : [],
-      _optionalChain([module, 'optionalAccess', _78 => _78.links, 'optionalCall', _79 => _79()]) || []
+      _optionalChain([module, 'optionalAccess', _79 => _79.links, 'optionalCall', _80 => _80()]) || []
     ];
   }).flat(2);
   let preloads = getModuleLinkHrefs(matches, manifest);
@@ -6844,7 +6870,7 @@ function getNewMatchesForLinks(page, nextMatches, currentMatches, manifest, loca
       // param change, /users/123 -> /users/456
       currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
       // e.g. /files/images/avatar.jpg -> files/finances.xls
-      _optionalChain([currentMatches, 'access', _80 => _80[index], 'access', _81 => _81.route, 'access', _82 => _82.path, 'optionalAccess', _83 => _83.endsWith, 'call', _84 => _84("*")]) && currentMatches[index].params["*"] !== match.params["*"]
+      _optionalChain([currentMatches, 'access', _81 => _81[index], 'access', _82 => _82.route, 'access', _83 => _83.path, 'optionalAccess', _84 => _84.endsWith, 'call', _85 => _85("*")]) && currentMatches[index].params["*"] !== match.params["*"]
     );
   };
   if (mode === "assets") {
@@ -6867,7 +6893,7 @@ function getNewMatchesForLinks(page, nextMatches, currentMatches, manifest, loca
             location.pathname + location.search + location.hash,
             window.origin
           ),
-          currentParams: _optionalChain([currentMatches, 'access', _85 => _85[0], 'optionalAccess', _86 => _86.params]) || {},
+          currentParams: _optionalChain([currentMatches, 'access', _86 => _86[0], 'optionalAccess', _87 => _87.params]) || {},
           nextUrl: new URL(page, window.origin),
           nextParams: match.params,
           defaultShouldRevalidate: true
@@ -7139,10 +7165,10 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         )
       });
       let hasInitialData = initialState && initialState.loaderData && route.id in initialState.loaderData;
-      let initialData = hasInitialData ? _optionalChain([initialState, 'optionalAccess', _87 => _87.loaderData, 'optionalAccess', _88 => _88[route.id]]) : void 0;
+      let initialData = hasInitialData ? _optionalChain([initialState, 'optionalAccess', _88 => _88.loaderData, 'optionalAccess', _89 => _89[route.id]]) : void 0;
       let hasInitialError = initialState && initialState.errors && route.id in initialState.errors;
-      let initialError = hasInitialError ? _optionalChain([initialState, 'optionalAccess', _89 => _89.errors, 'optionalAccess', _90 => _90[route.id]]) : void 0;
-      let isHydrationRequest = needsRevalidation == null && (_optionalChain([routeModule, 'access', _91 => _91.clientLoader, 'optionalAccess', _92 => _92.hydrate]) === true || !route.hasLoader);
+      let initialError = hasInitialError ? _optionalChain([initialState, 'optionalAccess', _90 => _90.errors, 'optionalAccess', _91 => _91[route.id]]) : void 0;
+      let isHydrationRequest = needsRevalidation == null && (_optionalChain([routeModule, 'access', _92 => _92.clientLoader, 'optionalAccess', _93 => _93.hydrate]) === true || !route.hasLoader);
       dataRoute.loader = async ({ request, params, context }, singleFetch) => {
         try {
           let result = await prefetchStylesAndCallHandler(async () => {
@@ -7436,7 +7462,7 @@ function getPatchRoutesOnNavigationFunction(manifest, routeModules, ssr, routeDi
 function useFogOFWarDiscovery(router, manifest, routeModules, ssr, routeDiscovery, isSpaMode) {
   React6.useEffect(() => {
     if (!isFogOfWarEnabled(routeDiscovery, ssr) || // @ts-expect-error - TS doesn't know about this yet
-    _optionalChain([window, 'access', _93 => _93.navigator, 'optionalAccess', _94 => _94.connection, 'optionalAccess', _95 => _95.saveData]) === true) {
+    _optionalChain([window, 'access', _94 => _94.navigator, 'optionalAccess', _95 => _95.connection, 'optionalAccess', _96 => _96.saveData]) === true) {
       return;
     }
     function registerElement(el) {
@@ -7499,7 +7525,7 @@ function getManifestPath(_manifestPath, basename) {
 var MANIFEST_VERSION_STORAGE_KEY = "react-router-manifest-version";
 async function fetchAndApplyManifestPatches(paths, errorReloadPath, manifest, routeModules, ssr, isSpaMode, basename, manifestPath, patchRoutes, signal) {
   const searchParams = new URLSearchParams();
-  paths.sort().forEach((path) => searchParams.append("p", path));
+  searchParams.set("paths", paths.sort().join(","));
   searchParams.set("version", manifest.version);
   let url = new URL(
     getManifestPath(manifestPath, basename),
@@ -7522,13 +7548,16 @@ async function fetchAndApplyManifestPatches(paths, errorReloadPath, manifest, ro
         );
         return;
       }
-      if (sessionStorage.getItem(MANIFEST_VERSION_STORAGE_KEY) === manifest.version) {
-        console.error(
-          "Unable to discover routes due to manifest version mismatch."
-        );
-        return;
+      try {
+        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);
+      } catch (e2) {
       }
-      sessionStorage.setItem(MANIFEST_VERSION_STORAGE_KEY, manifest.version);
       window.location.href = errorReloadPath;
       console.warn("Detected manifest version mismatch, reloading...");
       await new Promise(() => {
@@ -7536,10 +7565,13 @@ async function fetchAndApplyManifestPatches(paths, errorReloadPath, manifest, ro
     } else if (res.status >= 400) {
       throw new Error(await res.text());
     }
-    sessionStorage.removeItem(MANIFEST_VERSION_STORAGE_KEY);
+    try {
+      sessionStorage.removeItem(MANIFEST_VERSION_STORAGE_KEY);
+    } catch (e3) {
+    }
     serverPatches = await res.json();
   } catch (e) {
-    if (_optionalChain([signal, 'optionalAccess', _96 => _96.aborted])) return;
+    if (_optionalChain([signal, 'optionalAccess', _97 => _97.aborted])) return;
     throw e;
   }
   let knownRoutes = new Set(Object.keys(manifest.routes));
@@ -7780,7 +7812,7 @@ function PrefetchPageLinksImpl({
       if (!manifestRoute || !manifestRoute.hasLoader) {
         return;
       }
-      if (!newMatchesForData.some((m2) => m2.route.id === m.route.id) && m.route.id in loaderData && _optionalChain([routeModules, 'access', _97 => _97[m.route.id], 'optionalAccess', _98 => _98.shouldRevalidate])) {
+      if (!newMatchesForData.some((m2) => m2.route.id === m.route.id) && m.route.id in loaderData && _optionalChain([routeModules, 'access', _98 => _98[m.route.id], 'optionalAccess', _99 => _99.shouldRevalidate])) {
         foundOptOutRoute = true;
       } else if (manifestRoute.hasClientLoader) {
         foundOptOutRoute = true;
@@ -7854,7 +7886,7 @@ function Meta() {
       error
     };
     matches[i] = match;
-    if (_optionalChain([routeModule, 'optionalAccess', _99 => _99.meta])) {
+    if (_optionalChain([routeModule, 'optionalAccess', _100 => _100.meta])) {
       routeMeta = typeof routeModule.meta === "function" ? routeModule.meta({
         data: data2,
         loaderData: data2,
@@ -7953,7 +7985,7 @@ function Scripts(scriptProps) {
     }
     let streamScript = "window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());";
     let contextScript = staticContext ? `window.__reactRouterContext = ${serverHandoffString};${streamScript}` : " ";
-    let routeModulesScript = !isStatic ? " " : `${_optionalChain([manifest, 'access', _100 => _100.hmr, 'optionalAccess', _101 => _101.runtime]) ? `import ${JSON.stringify(manifest.hmr.runtime)};` : ""}${!enableFogOfWar ? `import ${JSON.stringify(manifest.url)}` : ""};
+    let routeModulesScript = !isStatic ? " " : `${_optionalChain([manifest, 'access', _101 => _101.hmr, 'optionalAccess', _102 => _102.runtime]) ? `import ${JSON.stringify(manifest.hmr.runtime)};` : ""}${!enableFogOfWar ? `import ${JSON.stringify(manifest.url)}` : ""};
 ${matches.map((match, routeIndex) => {
       let routeVarName = `route${routeIndex}`;
       let manifestEntry = manifest.routes[match.route.id];
@@ -8183,7 +8215,7 @@ function BoundaryShell({
   children
 }) {
   let { routeModules } = useFrameworkContext();
-  if (_optionalChain([routeModules, 'access', _102 => _102.root, 'optionalAccess', _103 => _103.Layout]) && !isOutsideRemixApp) {
+  if (_optionalChain([routeModules, 'access', _103 => _103.root, 'optionalAccess', _104 => _104.Layout]) && !isOutsideRemixApp) {
     return children;
   }
   return /* @__PURE__ */ React8.createElement("html", { lang: "en" }, /* @__PURE__ */ React8.createElement("head", null, /* @__PURE__ */ React8.createElement("meta", { charSet: "utf-8" }), /* @__PURE__ */ React8.createElement(