react-router 7.17.0 → 7.18.1

package/dist/production/index.mjs

@@ -1,5 +1,5 @@
 /**
- * react-router v7.17.0
+ * react-router v7.18.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -21,14 +21,13 @@ import {
   createRoutesStub,
   createSession,
   createSessionStorage,
-  deserializeErrors,
   getHydrationData,
   href,
   isCookie,
   isSession,
   routeRSCServerRequest,
   setDevServerHooks
-} from "./chunk-5TQZEVD5.mjs";
+} from "./chunk-3MA7PLKB.mjs";
 import {
   Action,
   Await,
@@ -142,7 +141,7 @@ import {
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-OSYEOCBT.mjs";
+} from "./chunk-3WDNQUW5.mjs";
 export {
   Await,
   BrowserRouter,
@@ -194,7 +193,6 @@ export {
   createMemoryHistory as UNSAFE_createMemoryHistory,
   createRouter as UNSAFE_createRouter,
   decodeViaTurboStream as UNSAFE_decodeViaTurboStream,
-  deserializeErrors as UNSAFE_deserializeErrors,
   getHydrationData as UNSAFE_getHydrationData,
   getPatchRoutesOnNavigationFunction as UNSAFE_getPatchRoutesOnNavigationFunction,
   getTurboStreamSingleFetchDataStrategy as UNSAFE_getTurboStreamSingleFetchDataStrategy,

package/dist/{development/instrumentation-1q4YhLGP.d.ts → production/instrumentation-Dkmpzd13.d.ts}

@@ -1,4 +1,4 @@
-import { e as RouteObject, f as History, g as MaybePromise, c as RouterContextProvider, h as MapRoutePropertiesFunction, i as Action, L as Location, D as DataRouteMatch, j as Submission, k as RouteData, l as DataStrategyFunction, m as PatchRoutesOnNavigationFunction, n as DataRouteObject, o as RouteBranch, p as RouteManifest, U as UIMatch, T as To, q as HTMLFormMethod, F as FormEncType, r as Path, s as LoaderFunctionArgs, t as MiddlewareEnabled, u as AppLoadContext } from './data-D4xhSy90.js';
+import { e as RouteObject, f as History, g as MaybePromise, c as RouterContextProvider, h as MapRoutePropertiesFunction, i as Action, L as Location, D as DataRouteMatch, j as Submission, k as RouteData, l as DataStrategyFunction, m as PatchRoutesOnNavigationFunction, n as DataRouteObject, o as RouteBranch, p as RouteManifest, U as UIMatch, T as To, q as HTMLFormMethod, F as FormEncType, r as Path, s as LoaderFunctionArgs, t as MiddlewareEnabled, u as AppLoadContext } from './data-CjO11-hU.js';
 
 /**
  * A Router instance manages all navigation and data loading/mutations
@@ -712,4 +712,4 @@ type RequestHandlerInstrumentationInfo = Readonly<{
     context: ReadonlyContext | undefined;
 }>;
 
-export { type BlockerFunction as B, type ClientInstrumentation as C, type Fetcher as F, type GetScrollPositionFunction as G, type HydrationState as H, type InstrumentRequestHandlerFunction as I, type NavigationStates as N, type RouterInit as R, type StaticHandler as S, type Router as a, type Blocker as b, type RelativeRoutingType as c, type RouterState as d, type GetScrollRestorationKeyFunction as e, type StaticHandlerContext as f, type Navigation as g, type RouterSubscriber as h, type RouterNavigateOptions as i, type RouterFetchOptions as j, type RevalidationState as k, type ServerInstrumentation as l, type InstrumentRouterFunction as m, type InstrumentRouteFunction as n, type InstrumentationHandlerResult as o, IDLE_NAVIGATION as p, IDLE_FETCHER as q, IDLE_BLOCKER as r, createRouter as s, type FutureConfig as t, type CreateStaticHandlerOptions as u };
+export { type BlockerFunction as B, type ClientInstrumentation as C, type Fetcher as F, type GetScrollPositionFunction as G, type HydrationState as H, type InstrumentRequestHandlerFunction as I, type NavigationStates as N, type RouterInit as R, type StaticHandler as S, type Router as a, type Blocker as b, type RelativeRoutingType as c, type GetScrollRestorationKeyFunction as d, type StaticHandlerContext as e, type Navigation as f, type RouterState as g, type RouterSubscriber as h, type RouterNavigateOptions as i, type RouterFetchOptions as j, type RevalidationState as k, type ServerInstrumentation as l, type InstrumentRouterFunction as m, type InstrumentRouteFunction as n, type InstrumentationHandlerResult as o, IDLE_NAVIGATION as p, IDLE_FETCHER as q, IDLE_BLOCKER as r, createRouter as s, type FutureConfig as t, type CreateStaticHandlerOptions as u };

package/dist/production/lib/types/internal.d.mts

@@ -1,5 +1,5 @@
-import { R as RouteModule, e as LinkDescriptor, L as Location, F as Func, f as Pretty, g as MetaDescriptor, G as GetLoaderData, h as ServerDataFunctionArgs, i as MiddlewareNextFunction, j as ClientDataFunctionArgs, D as DataStrategyResult, k as ServerDataFrom, N as Normalize, l as GetActionData } from '../../data-U8FS-wNn.mjs';
-import { R as RouteFiles, P as Pages } from '../../register-CqK96Zfk.mjs';
+import { R as RouteModule, e as LinkDescriptor, L as Location, F as Func, f as Pretty, g as MetaDescriptor, G as GetLoaderData, h as ServerDataFunctionArgs, i as MiddlewareNextFunction, j as ClientDataFunctionArgs, D as DataStrategyResult, k as ServerDataFrom, N as Normalize, l as GetActionData } from '../../data-DEjBmEfD.mjs';
+import { R as RouteFiles, P as Pages } from '../../register-CmkRspdl.mjs';
 import 'react';
 
 type MaybePromise<T> = T | Promise<T>;

package/dist/production/lib/types/internal.d.ts

@@ -1,5 +1,5 @@
-import { R as RouteModule, v as LinkDescriptor, L as Location, w as Func, x as Pretty, y as MetaDescriptor, G as GetLoaderData, z as ServerDataFunctionArgs, B as MiddlewareNextFunction, E as ClientDataFunctionArgs, I as DataStrategyResult, J as ServerDataFrom, N as Normalize, K as GetActionData } from '../../data-D4xhSy90.js';
-import { R as RouteFiles, P as Pages } from '../../register-CNAx3TXj.js';
+import { R as RouteModule, v as LinkDescriptor, L as Location, w as Func, x as Pretty, y as MetaDescriptor, G as GetLoaderData, z as ServerDataFunctionArgs, B as MiddlewareNextFunction, E as ClientDataFunctionArgs, I as DataStrategyResult, J as ServerDataFrom, N as Normalize, K as GetActionData } from '../../data-CjO11-hU.js';
+import { R as RouteFiles, P as Pages } from '../../register-roq_0qYo.js';
 import 'react';
 
 type MaybePromise<T> = T | Promise<T>;

package/dist/production/lib/types/internal.js

@@ -1,5 +1,5 @@
 "use strict";/**
- * react-router v7.17.0
+ * react-router v7.18.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/types/internal.mjs

@@ -1,5 +1,5 @@
 /**
- * react-router v7.17.0
+ * react-router v7.18.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/{register-CqK96Zfk.d.mts → register-CmkRspdl.d.mts}

@@ -1,4 +1,4 @@
-import { R as RouteModule } from './data-U8FS-wNn.mjs';
+import { R as RouteModule } from './data-DEjBmEfD.mjs';
 
 /**
  * Apps can use this interface to "register" app-wide types for React Router via interface declaration merging and module augmentation.

package/dist/production/{register-CNAx3TXj.d.ts → register-roq_0qYo.d.ts}

@@ -1,4 +1,4 @@
-import { R as RouteModule } from './data-D4xhSy90.js';
+import { R as RouteModule } from './data-CjO11-hU.js';
 
 /**
  * Apps can use this interface to "register" app-wide types for React Router via interface declaration merging and module augmentation.

package/docs/explanation/type-safety.md

@@ -50,7 +50,7 @@ React Router's type generation executes your route config (`app/routes.ts` by de
 It then generates a `+types/<route file>.d.ts` for each route within a special `.react-router/types/` directory.
 With [`rootDirs` configured][route-module-type-safety], TypeScript can import these generated files as if they were right next to their corresponding route modules.
 
-For a deeper dive into some of the design decisions, check out our [type inference decision doc](https://github.com/remix-run/react-router/blob/dev/decisions/0012-type-inference.md).
+For a deeper dive into some of the design decisions, check out our [type inference decision doc](https://github.com/remix-run/react-router/blob/main/decisions/0012-type-inference.md).
 
 [route-module-type-safety]: ../how-to/route-module-type-safety
 

package/docs/how-to/headers.md

@@ -110,7 +110,8 @@ The easiest way is to simply append to the parent headers. This avoids overwriti
 ```tsx
 export function headers({ parentHeaders }: HeadersArgs) {
   parentHeaders.append(
-    "Permissions-Policy: geolocation=()",
+    "Permissions-Policy",
+    "geolocation=()",
   );
   return parentHeaders;
 }

package/docs/how-to/security.md

@@ -13,15 +13,17 @@ This is by no means a comprehensive guide, but React Router provides features to
 
 ## `Content-Security-Policy`
 
-If you are implementing a [Content-Security-Policy (CSP)][csp] in your application, specifically one using the `unsafe-inline` directive, you will need to specify a [`nonce`][nonce] attribute on the inline `<script>` elements rendered in your HTML. This must be specified on any API that generates inline scripts, including:
+If you are implementing a [Content-Security-Policy (CSP)][csp] in your application, specifically one using the `unsafe-inline` directive, you will need to specify a [`nonce`][nonce] attribute on the inline `<script>` elements rendered in your HTML.
 
-- [`<Scripts nonce>`][scripts] (`root.tsx`)
-- [`<ScrollRestoration nonce>`][scrollrestoration] (`root.tsx`)
-- [`<ServerRouter nonce>`][serverrouter] (`entry.server.tsx`)
-- [`renderToPipeableStream(..., { nonce })`][renderToPipeableStream] (`entry.server.tsx`)
-- [`renderToReadableStream(..., { nonce })`][renderToReadableStream] (`entry.server.tsx`)
+Add a nonce to these two spots in [`entry.server.tsx`][entryserver]:
+
+- The [`<ServerRouter nonce>`][serverrouter] prop
+  - This will be proxied along through React Context and used for other Framework Mode components that output `nonce`-aware elements, including [`<Scripts>`][scripts], [`<ScrollRestoration>`][scrollrestoration]
+  - If those components specify their own `nonce` prop, it will override the `ServerRouter` value
+- The `nonce` options of [`renderToPipeableStream`][renderToPipeableStream]/[`renderToReadableStream`][renderToReadableStream]
 
 [csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP
+[entryserver]: ../api/framework-conventions/entry.server.tsx
 [nonce]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
 [renderToPipeableStream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
 [renderToReadableStream]: https://react.dev/reference/react-dom/server/renderToReadableStream

package/docs/how-to/status.md

@@ -54,7 +54,7 @@ export async function loader({ params }: Route.ActionArgs) {
   let project = await fakeDb.getProject(params.id);
   if (!project) {
     // throw to ErrorBoundary
-    throw data(null, { status: 404 });
+    throw data("Not Found", { status: 404 });
   }
   return project;
 }

package/docs/start/data/installation.md

@@ -47,6 +47,10 @@ ReactDOM.createRoot(root).render(
 );
 ```
 
+<docs-info>Data Routers should not be held in React state. You should create your router
+once outside of the React tree and pass it to `<RouterProvider>`. You can use
+`patchRoutesOnNavigation` to add additional routes programmatically.</docs-info>
+
 ---
 
 Next: [Routing](./routing)

package/docs/start/framework/deploying.md

@@ -94,3 +94,7 @@ Netlify maintains their own template for React Router. Checkout the [Netlify Gui
 ### EdgeOne Pages
 
 EdgeOne Pages maintains their own template for React Router. Checkout the [EdgeOne Pages Guide](https://pages.edgeone.ai/document/framework-react-router) for more information.
+
+### DeployHQ
+
+DeployHQ maintains their own guide for deploying React Router v7 to your own server. Checkout the [DeployHQ Guide](https://www.deployhq.com/guides/deploy-react-router-from-github) for more information.

package/docs/upgrading/future.md

@@ -1,17 +1,34 @@
 ---
-title: Future Flags
+title: Future Changes
 order: 1
 ---
 
-# Future Flags and Deprecations
+# Future Changes
 
-This guide walks you through the process of adopting future flags in your React Router app. By following this strategy, you will be able to upgrade to the next major version of React Router with minimal changes. To read more about future flags see [API Development Strategy][api-development-strategy].
+We try our best to keep major version upgrades simple and boring through the use of opt-in APIs and [Future Flags][api-development-strategy]. Future flags are used to gate breaking changes that don't otherwise have a good call-site opt-in strategy. By adopting all opt-in APIs and future flags, you should be able to upgrade to the next major version of React Router with minimal changes.
 
 We highly recommend you make a commit after each step and ship it instead of doing everything all at once. Most flags can be adopted in any order, with exceptions noted below.
 
+## Minimum Versions
+
+[MODES: framework, data, declarative]
+
+<br/>
+<br/>
+
+React Router v8 will require the following minimum versions. You can prepare for the upgrade by updating them while still on v7:
+
+- `node@22.22+`
+- `react@19.2.7+`/`react-dom@19.2.7+`
+
+Framework mode will also require:
+
+- `vite@7+` (requires `future.v8_viteEnvironmentApi`)
+  - also make sure any custom Vite plugins or config are compatible with Vite 7.
+
 ## Update to latest v7.x
 
-First update to the latest minor version of v7.x to have the latest future flags. You may see a number of deprecation warnings as you upgrade, which we'll cover below.
+Before adopting any future flags or call-site opt-in changes, you should update to the latest minor version of v7.x to make sure you have access to the latest flags. You may see a number of deprecation warnings as you upgrade, which we'll cover below.
 
 👉 Update to latest v7
 
@@ -19,7 +36,9 @@ First update to the latest minor version of v7.x to have the latest future flags
 npm install react-router@7 @react-router/{dev,node,etc.}@7
 ```
 
-## `future.v8_middleware`
+## Future Flags
+
+### `future.v8_middleware`
 
 [MODES: framework, data]
 
@@ -47,7 +66,7 @@ export default {
 In Data mode:
 
 ```ts
-import { createBrowserRouter } from "react-router/dom";
+import { createBrowserRouter } from "react-router";
 
 const router = createBrowserRouter(routes, {
   future: {
@@ -63,7 +82,7 @@ If you're using the `context` parameter in `loader` and `action` functions, you
 - In Framework mode, if you're using `react-router-serve`, you should not need to make any updates. Otherwise, this only applies if you have a custom server with a `getLoadContext` function. Please see the docs on the middleware [`getLoadContext` changes](../how-to/middleware#changes-to-getloadcontextapploadcontext) and the instructions to [migrate to the new API](../how-to/middleware#migration-from-apploadcontext).
 - In Data mode, add the `Future` module augmentation described in the [middleware docs](../how-to/middleware#1-typescript-augment-future-for-loaderaction-context) so `context` is typed correctly.
 
-## `future.v8_splitRouteModules`
+### `future.v8_splitRouteModules`
 
 [MODES: framework]
 
@@ -92,7 +111,7 @@ export default {
 
 No code changes are required. This is an optimization feature that works automatically once enabled.
 
-## `future.v8_viteEnvironmentApi`
+### `future.v8_viteEnvironmentApi`
 
 [MODES: framework]
 
@@ -150,7 +169,7 @@ import { defineConfig } from "vite";
 
 See the [`node-custom-server` template][node-custom-server-template] for a complete example.
 
-## `future.v8_passThroughRequests`
+### `future.v8_passThroughRequests`
 
 [MODES: framework]
 
@@ -213,7 +232,7 @@ export async function loader({
 }
 ```
 
-## `future.v8_trailingSlashAwareDataRequests`
+### `future.v8_trailingSlashAwareDataRequests`
 
 [MODES: framework]
 
@@ -266,11 +285,201 @@ export default {
 
 If you have custom app, CDN, cache, or rewrite logic that matches `.data` request URLs, update it to handle the new trailing-slash-aware `/_.data` format.
 
+## Other Planned Breaking Changes
+
+The changes in this section are not controlled by future flags, but you can update your code in v7 to be ready for v8.
+
+### `meta` `data` Argument
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+**Background**
+
+The `data` fields passed to route module `meta` functions are deprecated and will be removed in React Router v8. Use `loaderData` instead on `MetaArgs` and each item in `MetaArgs.matches`.
+
+👉 **Update your Code**
+
+Replace `data` with `loaderData` in your `meta` functions:
+
+```diff
+export function meta({
+-  data,
++  loaderData,
+  matches,
+}: Route.MetaArgs) {
+  return [
+    {
+-      title: data.title,
++      title: loaderData.title,
+    },
+  ];
+}
+```
+
+If you read data from parent matches, update those references too:
+
+```diff
+export function meta({ matches }: Route.MetaArgs) {
+  let rootMatch = matches.find((match) => match.id === "root");
+-  let rootData = rootMatch?.data;
++  let rootData = rootMatch?.loaderData;
+
+  return [{ title: rootData?.siteTitle }];
+}
+```
+
+### `react-router-dom`
+
+[MODES: framework, data, declarative]
+
+<br/>
+<br/>
+
+**Background**
+
+React Router v8 will remove the `react-router-dom` re-export package. In v8, you should import DOM-specific APIs from `react-router/dom` and everything else from `react-router`.
+
+👉 **Update your Code**
+
+Uninstall `react-router-dom`:
+
+```sh
+npm uninstall react-router-dom
+```
+
+Replace `react-router-dom` imports with `react-router` imports:
+
+```diff
+-import { Link, useLocation } from "react-router-dom";
++import { Link, useLocation } from "react-router";
+```
+
+For DOM-specific APIs, import from `react-router/dom`:
+
+```diff
+-import { RouterProvider } from "react-router-dom";
++import { RouterProvider } from "react-router/dom";
+```
+
+### Cloudflare Vite Plugin
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+**Background**
+
+React Router v8 will remove the React Router Cloudflare dev proxy. Cloudflare projects should use [`@cloudflare/vite-plugin`][cloudflare-vite-plugin] instead.
+
+👉 **Update your Code**
+
+Replace `cloudflareDevProxy` with `cloudflare`:
+
+```diff filename=vite.config.ts
+import { reactRouter } from "@react-router/dev/vite";
+-import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
++import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+-    cloudflareDevProxy(),
++    cloudflare(),
+    reactRouter(),
+  ],
+});
+```
+
+### `@react-router/architect` `useRequestContextDomainName`
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+**Background**
+
+The `@react-router/architect` adapter currently uses `X-Forwarded-Host` when creating the `request`, falling back to the `Host` header. In React Router v8, the adapter will use `event.requestContext.domainName` by default, falling back to the `Host` header.
+
+👉 **Update your Code**
+
+Opt in to the v8 behavior now by passing `useRequestContextDomainName: true`:
+
+```ts
+import { createRequestHandler } from "@react-router/architect";
+import * as build from "./build/server";
+
+export const handler = createRequestHandler({
+  build,
+  useRequestContextDomainName: true,
+});
+```
+
+This option will be removed in v8 once the `event.requestContext.domainName` behavior is the default.
+
 ## Unstable Future Flags (Optional)
 
-We document some [unstable] flags here as a reference for folks contributing to the project via beta testing, but they are not generally recommended for production use and may having breaking changes patch/minor releases - adopt with caution!
+We document some [unstable] flags here as a reference for folks contributing to the project via beta testing, but they are not generally recommended for production use and may have breaking changes in patch or minor releases - adopt with caution!
+
+### `future.unstable_optimizeDeps`
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+**Background**
+
+This flag lets React Router provide Vite's dependency optimizer with the client entry file and route module files. This can improve dependency optimization in development, but the behavior is still experimental.
+
+👉 **Enable the Flag**
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  future: {
+    unstable_optimizeDeps: true,
+  },
+} satisfies Config;
+```
+
+**Update your Code**
+
+No code changes are required. If you run into dependency optimization issues after enabling this flag, remove the flag and restart the dev server.
+
+### `future.unstable_previewServerPrerendering`
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+**Background**
+
+This flag switches prerendering to use Vite's preview-server request flow instead of the current build-time prerendering path so that it works in non-Node environments such as `workerd`. Enabling this flag also enables `future.v8_viteEnvironmentApi`, so you should review the `future.v8_viteEnvironmentApi` guidance above before adopting it.
+
+<docs-info>You do not have to adopt this flag ahead of your upgrade to v8 since it only changes the underlying prerender implementation. There is at least one known bug fixed in v8 where your `react-router.config.ts`  `buildEnd` hook would run prior to prerendered files being written to disk.</docs-info>
+
+👉 **Enable the Flag**
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  future: {
+    unstable_previewServerPrerendering: true,
+  },
+} satisfies Config;
+```
+
+**Update your Code**
 
-_No current unstable flags to document_
+No code changes are required unless your app has a custom Vite configuration that is affected by `future.v8_viteEnvironmentApi`.
 
 [api-development-strategy]: ../community/api-development-strategy
 [unstable]: ../community/api-development-strategy#unstable-flags
@@ -278,3 +487,4 @@ _No current unstable flags to document_
 [Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
 [vite-environment]: https://vite.dev/guide/api-environment
 [node-custom-server-template]: https://github.com/remix-run/react-router-templates/blob/7c617a435510bc3add3a5395c07bc65328b65e9e/node-custom-server/vite.config.ts
+[cloudflare-vite-plugin]: https://developers.cloudflare.com/workers/vite-plugin/

package/docs/upgrading/remix.md

@@ -1,9 +1,9 @@
 ---
-title: Upgrading from Remix
+title: Upgrading from Remix v2
 order: 3
 ---
 
-# Upgrading from Remix
+# Upgrading from Remix v2
 
 <docs-info>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "7.17.0",
+  "version": "7.18.1",
   "description": "Declarative routing for React",
   "keywords": [
     "react",