react-router 8.5.0 → 8.5.1

package/dist/production/vendor/turbo-stream-v2/unflatten.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.5.0
+ * react-router v8.5.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -50,6 +50,7 @@ function hydrate(index) {
 				set(-0);
 				continue;
 		}
+		validateIndex(index, values.length);
 		if (hydrated[index]) {
 			set(hydrated[index]);
 			continue;
@@ -121,11 +122,21 @@ function hydrate(index) {
 					set(obj);
 					continue;
 				case "P":
+					validateIndex(b, values.length);
 					if (hydrated[b]) set(hydrated[index] = hydrated[b]);
 					else {
 						const d = new Deferred();
+						const promise = d.promise;
+						promise.status = "pending";
+						promise.then((value) => {
+							promise.status = "fulfilled";
+							promise.value = value;
+						}, (reason) => {
+							promise.status = "rejected";
+							promise.reason = reason;
+						});
 						deferred[b] = d;
-						set(hydrated[index] = d.promise);
+						set(hydrated[index] = promise);
 					}
 					continue;
 				case "E":
@@ -135,6 +146,7 @@ function hydrate(index) {
 					set(error);
 					continue;
 				case "Z":
+					validateIndex(b, values.length);
 					set(hydrated[index] = hydrated[b]);
 					continue;
 				default:
@@ -185,7 +197,12 @@ function hydrate(index) {
 					r[0] = k;
 				}]);
 				postRun.push(() => {
-					object[r[0]] = r[1];
+					Object.defineProperty(object, r[0], {
+						value: r[1],
+						enumerable: true,
+						configurable: true,
+						writable: true
+					});
 				});
 			}
 			set(object);
@@ -195,5 +212,8 @@ function hydrate(index) {
 	while (postRun.length > 0) postRun.pop()();
 	return result;
 }
+function validateIndex(index, length) {
+	if (!Number.isSafeInteger(index) || index < 0 || index >= length) throw new SyntaxError();
+}
 //#endregion
 export { unflatten };

package/dist/production/vendor/turbo-stream-v2/utils.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.5.0
+ * react-router v8.5.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/docs/explanation/backend-for-frontend.md

@@ -6,9 +6,6 @@ title: Backend For Frontend
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 While React Router can serve as your fullstack application, it also fits perfectly into the "Backend for Frontend" architecture.
 
 The BFF strategy employs a web server with a job scoped to serving the frontend web app and connecting it to the services it needs: your database, mailer, job queues, existing backend APIs (REST, GraphQL), etc. Instead of your UI integrating directly from the browser to these services, it connects to the BFF, and the BFF connects to your services.

package/docs/explanation/code-splitting.md

@@ -6,9 +6,6 @@ title: Automatic Code Splitting
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 When using React Router's framework features, your application is automatically code split to improve the performance of initial load times when users visit your application.
 
 ## Code Splitting by Route

package/docs/explanation/concurrency.md

@@ -6,9 +6,6 @@ title: Network Concurrency Management
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 When building web applications, managing network requests can be a daunting task. The challenges of ensuring up-to-date data and handling simultaneous requests often lead to complex logic in the application to deal with interruptions and race conditions. React Router simplifies this process by automating network management while mirroring and expanding upon the intuitive behavior of web browsers.
 
 To help understand how React Router handles concurrency, it's important to remember that after `form` submissions, React Router will fetch fresh data from the `loader`s. This is called revalidation.

package/docs/explanation/hot-module-replacement.md

@@ -6,9 +6,6 @@ title: Hot Module Replacement
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 Hot Module Replacement is a technique for updating modules in your app without needing to reload the page.
 It's a great developer experience, and React Router supports it when using Vite.
 

package/docs/explanation/lazy-route-discovery.md

@@ -6,9 +6,6 @@ title: Lazy Route Discovery
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 Lazy Route Discovery is a performance optimization that loads route information progressively as users navigate through your application, rather than loading the complete route manifest upfront.
 
 With Lazy Route Discovery enabled (the default), React Router sends only the routes needed for the initial server-side render in the manifest. As users navigate to new parts of your application, additional route information is fetched dynamically and added to the client-side manifest.

package/docs/explanation/progressive-enhancement.md

@@ -6,9 +6,6 @@ title: Progressive Enhancement
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 > Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead.
 >
 > <cite>- [Wikipedia][wikipedia]</cite>

package/docs/explanation/race-conditions.md

@@ -6,9 +6,6 @@ title: Race Conditions
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 While impossible to eliminate every possible race condition in your application, React Router automatically handles the most common race conditions found in web user interfaces.
 
 ## Browser Behavior

package/docs/explanation/react-transitions.md

@@ -6,9 +6,6 @@ title: React Transitions
 
 [MODES: framework, data, declarative]
 
-<br/>
-<br/>
-
 [React 18][react-18] introduced the concept of "transitions" which allow you to differentiate urgent from non-urgent UI updates. To learn more about React Transitions and "concurrent rendering" Please refer to React's official documentation:
 
 - [What is Concurrent React][concurrent]

package/docs/explanation/sessions-and-cookies.md

@@ -324,7 +324,7 @@ React Router makes it easy to store sessions in your own database if needed. The
 - `createData` will be called from `commitSession` on the initial session creation when no session ID exists in the cookie
 - `readData` will be called from `getSession` when a session ID exists in the cookie
 - `updateData` will be called from `commitSession` when a session ID already exists in the cookie
-- `deleteData` is called from `destroySession`
+- `deleteData` is called from `destroySession` when the session has an ID
 
 The following example shows how you could do this using a generic database client:
 

package/docs/explanation/state-management.md

@@ -6,9 +6,6 @@ title: State Management
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 State management in React typically involves maintaining a synchronized cache of server data on the client side. However, when using React Router as your framework, most of the traditional caching solutions become redundant because of how it inherently handles data synchronization.
 
 ## Understanding State Management in React

package/docs/explanation/styling.md

@@ -6,9 +6,6 @@ title: Styling
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 Framework mode uses the React Router Vite plugin, so the styling story is mostly just Vite's styling story.
 
 React Router does not have a separate CSS pipeline for Framework mode. In practice, there are three patterns that matter:

package/docs/explanation/type-safety.md

@@ -6,9 +6,6 @@ title: Type Safety
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 If you haven't done so already, check out our guide for [setting up type safety][route-module-type-safety] in a new project.
 
 React Router generates types for each route in your app to provide type safety for the route module exports.

package/docs/how-to/accessibility.md

@@ -12,9 +12,6 @@ React Router makes certain accessibility practices the default where possible an
 
 [MODES: framework, data, declarative]
 
-<br/>
-<br/>
-
 The [`<Link>` component][link] renders a standard anchor tag, meaning that you get its accessibility behaviors from the browser for free!
 
 React Router also provides the [`<NavLink/>`][navlink] which behaves the same as `<Link>`, but it also provides context for assistive technology when the link points to the current page. This is useful for building navigation menus or breadcrumbs.
@@ -23,9 +20,6 @@ React Router also provides the [`<NavLink/>`][navlink] which behaves the same as
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 If you are rendering [`<Scripts>`][scripts] in your app, there are some important things to consider to make client-side routing more accessible for your users.
 
 With a traditional multi-page website we don't have to think about route changes too much. Your app renders an anchor tag, and the browser handles the rest. If your users disable JavaScript, your React Router app should already work this way by default!

package/docs/how-to/client-data.md

@@ -6,9 +6,6 @@ title: Client Data
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 You can fetch and mutate data directly in the browser using `clientLoader` and `clientAction` functions.
 
 These functions are the primary mechanism for data handling when using [SPA mode][spa]. This guide demonstrates common use cases for leveraging client data in Server-Side Rendering (SSR).

package/docs/how-to/data-strategy.md

@@ -6,9 +6,6 @@ title: Data Strategy
 
 [MODES: data]
 
-<br />
-<br />
-
 <docs-warning>This is a low-level API intended for advanced use-cases. This overrides React Router's internal handling of `action`/`loader` execution, and if done incorrectly will break your app code. Please use with caution and perform the appropriate testing.</docs-warning>
 
 ## Overview

package/docs/how-to/error-boundary.md

@@ -6,9 +6,6 @@ title: Error Boundaries
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 To avoid rendering an empty page to users, route modules will automatically catch errors in your code and render the closest `ErrorBoundary`.
 
 Error boundaries are not intended for rendering form validation errors or error reporting. Please see [Form Validation](./form-validation) and [Error Reporting](./error-reporting) instead.

package/docs/how-to/error-reporting.md

@@ -6,9 +6,6 @@ title: Error Reporting
 
 [MODES: framework,data]
 
-<br/>
-<br/>
-
 React Router catches errors in your route modules and sends them to [error boundaries](./error-boundary) to prevent blank pages when errors occur. However, `ErrorBoundary` isn't sufficient for logging and reporting errors.
 
 ## Server Errors

package/docs/how-to/fetchers.md

@@ -6,9 +6,6 @@ title: Using Fetchers
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 Fetchers are useful for creating complex, dynamic user interfaces that require multiple, concurrent data interactions without causing a navigation.
 
 Fetchers track their own, independent state and can be used to load data, mutate data, submit forms, and generally interact with loaders and actions.

package/docs/how-to/file-route-conventions.md

@@ -6,9 +6,6 @@ title: File Route Conventions
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 The `@react-router/fs-routes` package enables file-convention based route config.
 
 ## Setting up

package/docs/how-to/file-uploads.md

@@ -6,9 +6,6 @@ title: File Uploads
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 _Thank you to David Adams for [writing an original guide](https://programmingarehard.com/2024/09/06/remix-file-uploads-updated.html/) on which this doc is based. You can refer to it for even more examples._
 
 ## Basic File Upload

package/docs/how-to/form-validation.md

@@ -6,9 +6,6 @@ title: Form Validation
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 This guide walks through a simple signup form implementation. You will likely want to pair these concepts with third-party validation libraries and error components, but this guide only focuses on the moving pieces for React Router.
 
 ## 1. Setting Up

package/docs/how-to/headers.md

@@ -6,9 +6,6 @@ title: HTTP Headers
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 ## Reading request headers
 
 The `request` sent to route handlers is a standard Web Fetch [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request), so you can read headers directly from the [`request.headers`](https://developer.mozilla.org/en-US/docs/Web/API/Request/headers) property:

package/docs/how-to/instrumentation.md

@@ -6,9 +6,6 @@ title: Instrumentation
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 Instrumentation allows you to add logging, error reporting, and performance tracing to your React Router application without modifying your actual route handlers. This enables comprehensive observability solutions for production applications on both the server and client.
 
 ## Overview

package/docs/how-to/middleware.md

@@ -6,9 +6,6 @@ title: Middleware
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 Middleware allows you to run code before and after the [`Response`][Response] generation for the matched path. This enables [common patterns][common-patterns] like authentication, logging, error handling, and data preprocessing in a reusable way.
 
 Middleware runs in a nested chain, executing from parent routes to child routes on the way "down" to your route handlers, then from child routes back to parent routes on the way "up" after a [`Response`][Response] is generated.
@@ -474,6 +471,12 @@ Which `ErrorBoundary` is rendered will differ based on whether your middleware t
 
 ### Authentication
 
+Middleware on a protected route or a common ancestor can authenticate and authorize a request before the matched loaders and actions run.
+
+Loaders run in parallel and can be requested independently, so parent loaders are not capable of "protecting" child route loaders or actions. Each protected loader and action must perform its own checks unless appropriate server middleware enforces them before the handler runs.
+
+<docs-warning>Attach authorization middleware to the protected route or layout instead of gating its checks with literal pathname-prefix comparisons such as `url.pathname.startsWith("/admin")`. Literal checks may miss potential URL encodings that React Router route matching would cover.</docs-warning>
+
 ```tsx filename=app/middleware/auth.ts
 import { redirect } from "react-router";
 import { userContext } from "~/context";

package/docs/how-to/navigation-blocking.md

@@ -6,9 +6,6 @@ title: Navigation Blocking
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 When users are in the middle of a workflow, like filling out an important form, you may want to prevent them from navigating away from the page.
 
 This example will show:

package/docs/how-to/optimize-revalidation.md

@@ -6,9 +6,6 @@ title: Revalidation Optimization
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 After a mutation or some navigations, React Router re-runs loaders so
 the UI stays in sync with the server. That default is the right
 starting point. When a loader is expensive, or a mutation cannot

package/docs/how-to/pre-rendering.md

@@ -6,9 +6,6 @@ title: Pre-Rendering
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 Pre-Rendering allows you to speed up page loads for static content by rendering pages at build time instead of at runtime.
 
 ## Configuration

package/docs/how-to/presets.md

@@ -6,9 +6,6 @@ title: Presets
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 The [React Router config][react-router-config] supports a `presets` option to ease integration with other tools and hosting providers.
 
 [Presets][preset-type] can only do two things:

package/docs/how-to/react-server-components.md

@@ -7,9 +7,6 @@ unstable: true
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 <docs-warning>React Server Components support is experimental and subject to breaking changes in
 minor/patch releases. Please use with caution and pay **very** close attention
 to release notes for relevant changes.</docs-warning>

package/docs/how-to/resource-routes.md

@@ -6,9 +6,6 @@ title: Resource Routes
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 When server rendering, routes can serve "resources" instead of rendering components, like images, PDFs, JSON payloads, webhooks, etc.
 
 ## Defining a Resource Route

package/docs/how-to/route-discovery.md

@@ -1,9 +1,9 @@
 ---
-title: Application-Controlled Route Discovery
+title: Route Discovery
 unstable: true
 ---
 
-# Application-Controlled Route Discovery
+# Route Discovery
 
 [MODES: framework]
 
@@ -21,6 +21,8 @@ export default {
 
 Without this flag, React Router keeps its existing discovery implementation and the hook is unavailable. The flag supports conventional Framework Mode only.
 
+Enabling the flag does not require a custom implementation or a call to `unstable_useRouteDiscovery`. React Router continues to discover routes automatically and uses its built-in manifest-mismatch recovery unless you provide a custom `onManifestMismatch` handler.
+
 Keep `routeDiscovery.mode: "lazy"` (the default for SSR) and use `unstable_useRouteDiscovery` to choose when to discover destinations or load the complete route manifest.
 
 ```tsx

package/docs/how-to/route-module-type-safety.md

@@ -6,9 +6,6 @@ title: Route Module Type Safety
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 React Router generates route-specific types to power type inference for URL params, loader data, and more.
 This guide will help you set it up if you didn't start with a template.
 

package/docs/how-to/security.md

@@ -6,9 +6,6 @@ title: Security
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 This is by no means a comprehensive guide, but React Router provides features to help address a few aspects under the _very large_ umbrella that is _Security_.
 
 ## `Content-Security-Policy`

package/docs/how-to/server-bundles.md

@@ -6,9 +6,6 @@ title: Server Bundles
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 <docs-warning>This is an advanced feature designed for hosting provider integrations. When compiling your app into multiple server bundles, there will need to be a custom routing layer in front of your app directing requests to the correct bundle.</docs-warning>
 
 React Router typically builds your server code into a single bundle that exports a request handler function. However, there are scenarios where you might want to split your route tree into multiple server bundles, each exposing a request handler function for a subset of routes. To provide this flexibility, [`react-router.config.ts`][react-router-config] supports a `serverBundles` option, which is a function for assigning routes to different server bundles.

package/docs/how-to/spa.md

@@ -6,9 +6,6 @@ title: Single Page App (SPA)
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 <docs-info>This guide focuses on how to build Single Page Apps with React Router Framework mode. If you're using React Router in declarative or data mode, you can design your own SPA architecture.</docs-info>
 
 When using React Router as a framework, you can enable "SPA Mode" by setting `ssr:false` in your `react-router.config.ts` file. This will disable runtime server rendering and generate an `index.html` at build time that you can serve and hydrate as a SPA.

package/docs/how-to/status.md

@@ -6,9 +6,6 @@ title: Status Codes
 
 [MODES: framework ,data]
 
-<br/>
-<br/>
-
 Set status codes from loaders and actions with `data`.
 
 ```tsx filename=app/project.tsx lines=[3,12-15,20,23]

package/docs/how-to/suspense.md

@@ -6,9 +6,6 @@ title: Streaming with Suspense
 
 [MODES: framework, data]
 
-<br/>
-<br/>
-
 Streaming with React Suspense allows apps to speed up initial renders by deferring non-critical data and unblocking UI rendering.
 
 React Router supports React Suspense by returning promises from loaders and actions.
@@ -66,9 +63,28 @@ export default function MyComponent({
 }
 ```
 
-## With React 19
+## Opt into React's `use()` API
+
+<docs-warning>The `unstable_promise` prop is experimental and may change in minor or patch releases.</docs-warning>
+
+Use `<Await unstable_promise>` instead of `<Await resolve>` to opt into `React.use` under the hood while keeping the Await API:
+
+```tsx
+<React.Suspense fallback={<div>Loading...</div>}>
+  <Await
+    unstable_promise={nonCriticalData}
+    errorElement={<LoadingError />}
+  >
+    {(value) => <h3>Non critical value: {value}</h3>}
+  </Await>
+</React.Suspense>
+```
+
+This should largely behave the same as `<Await resolve>` while avoiding the legacy React Router promise tracking. Both support render-prop children, `useAsyncValue`, and `useAsyncError`. One notable difference with `unstable_promise` is that `errorElement` only handles promise rejections. Errors thrown while rendering children bubble to the nearest React error boundary.
+
+## Use React directly
 
-If you're using React 19, you can use `React.use` instead of `Await`, but you'll need to create a new component and pass the promise down to trigger the suspense fallback.
+You can also read the promise directly with `React.use`. Pass it to a child component rendered inside `<React.Suspense>` so the boundary can display its fallback while the promise is pending.
 
 ```tsx
 <React.Suspense fallback={<div>Loading...</div>}>
@@ -94,7 +110,7 @@ export const streamTimeout = 10_000;
 
 ## Handling early rejections (Node)
 
-React Router waits for all loaders to settle (via `Promise.all`) before it begins streaming the response. Once streaming has started, React Router catches subsequent rejections of your streamed promises and surfaces them to your `<Await>` (or React 19 `React.use`) error UI.
+React Router waits for all loaders to settle (via `Promise.all`) before it begins streaming the response. Once streaming has started, React Router catches subsequent rejections of your streamed promises and surfaces them to your `<Await>` (or `React.use`) error UI.
 
 However, if a streamed promise rejects _before_ all of the route's loaders have settled, React Router has not yet been able to attach a handler to it. In Node, an unhandled promise rejection will crash the process unless you have a top-level handler registered.
 

package/docs/how-to/using-handle.md

@@ -6,9 +6,6 @@ title: Using handle
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 You can build dynamic UI elements like breadcrumbs based on your route hierarchy using the [`useMatches`][use-matches] hook and [`handle`][handle] route exports.
 
 ## Understanding the Basics

package/docs/how-to/view-transitions.md

@@ -6,9 +6,6 @@ title: View Transitions
 
 [MODES: framework, data, declarative]
 
-<br/>
-<br/>
-
 Use React's [`<ViewTransition>`][react-view-transition] component to animate client-side navigations. This requires React and React DOM 19.3 or later.
 
 <docs-warning>

package/docs/start/framework/data-loading.md

@@ -80,6 +80,14 @@ export default function Product({
 
 Note that the `loader` function is removed from client bundles so you can use server only APIs without worrying about them being included in the browser.
 
+### Authentication and Authorization
+
+React Router runs matched route loaders in parallel and loaders can be requested independently, such as during fetcher calls or navigations that do not revalidate every matched route. Therefore it is not possible for a parent loader to "protect" child route loaders or actions via authentication checks.
+
+Unless guarded by appropriate [server middleware][auth-middleware], each protected loader and action must authenticate the request and authorize access to the data or operation before proceeding. For example, checking that a user is signed in does not establish that they have permission to access the requested project.
+
+Middleware on a protected route or a common ancestor can enforce shared checks before the protected loaders and actions run. Any permissions not enforced by that middleware must still be checked in the individual loader or action.
+
 ## Static Data Loading
 
 When pre-rendering, loaders are used to fetch data during the production build.
@@ -199,3 +207,4 @@ See also:
 [streaming]: ../../how-to/suspense
 [client-data]: ../../how-to/client-data
 [fetchers]: ../../how-to/fetchers#loading-data
+[auth-middleware]: ../../how-to/middleware#authentication

package/docs/upgrading/future.md

@@ -17,9 +17,6 @@ We highly recommend you make a commit after each step and ship it instead of doi
 
 [MODES: framework, data, declarative]
 
-<br/>
-<br/>
-
 React Router v9 will require the following minimum versions (as of now). You can prepare for the upgrade by updating them while still on v8:
 
 - `node@24+`
@@ -50,9 +47,6 @@ We document some [unstable] flags here as a reference for folks contributing to
 
 [MODES: framework]
 
-<br/>
-<br/>
-
 **Background**
 
 Now that the Web Streams API is [stable](https://nodejs.org/docs/latest-v22.x/api/webstreams.html) in Node 22+, it's viable for React Router to use React's [`renderToReadableStream`](https://react.dev/reference/react-dom/server/renderToReadableStream) in the server entry.
@@ -83,9 +77,6 @@ No code changes are required. If your app has a custom `entry.server.tsx`, this
 
 [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.
@@ -110,9 +101,6 @@ No code changes are required. If you run into dependency optimization issues aft
 
 [MODES: data]
 
-<br/>
-<br/>
-
 **Background**
 
 This flag opts Data Routers into a new (and vastly more efficient) route matcher