react-router 8.0.0-pre.0 → 8.0.0

package/dist/production/lib/server-runtime/server.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,13 +8,13 @@
  *
  * @license MIT
  */
-import { ErrorResponseImpl, RouterContextProvider, defaultMapRouteProperties, isRouteErrorResponse, stripBasename } from "../router/utils.js";
+import { ErrorResponseImpl, RouterContextProvider, defaultMapRouteProperties, isRouteErrorResponse, removeTrailingSlash, stripBasename } from "../router/utils.js";
 import { instrumentHandler } from "../router/instrumentation.js";
 import { createStaticHandler, getStaticContextFromError, isMutationMethod, isRedirectResponse, isResponse } from "../router/router.js";
 import { getManifestPath } from "../dom/ssr/fog-of-war.js";
 import { createEntryRouteModules } from "./entry.js";
 import { isServerMode } from "./mode.js";
-import { sanitizeErrors, serializeError, serializeErrors } from "./errors.js";
+import { sanitizeErrors, serializeError } from "./errors.js";
 import { matchServerRoutes } from "./routeMatching.js";
 import { getBuildTimeHeader, getDevServerHooks } from "./dev.js";
 import { createStaticHandlerDataRoutes } from "./routes.js";
@@ -54,7 +54,7 @@ function derive(build, mode) {
 		}
 		loadContext = initialContext || new RouterContextProvider();
 		let requestUrl = new URL(request.url);
-		let normalizedPathname = getNormalizedPath(request, build.basename).pathname;
+		let normalizedPathname = getNormalizedPath(request).pathname;
 		let isSpaMode = getBuildTimeHeader(request, "X-React-Router-SPA-Mode") === "yes";
 		if (!build.ssr) {
 			let decodedPath = decodeURI(normalizedPathname);
@@ -74,7 +74,7 @@ function derive(build, mode) {
 				decodedPath = strippedPath;
 			}
 			if (build.prerender.length === 0) isSpaMode = true;
-			else if (!build.prerender.includes(decodedPath) && !build.prerender.includes(decodedPath + "/")) if (requestUrl.pathname.endsWith(".data")) {
+			else if (!build.prerender.some((p) => removeTrailingSlash(p) === removeTrailingSlash(decodedPath))) if (requestUrl.pathname.endsWith(".data")) {
 				errorHandler(new ErrorResponseImpl(404, "Not Found", `Refusing to SSR the path \`${decodedPath}\` because \`ssr:false\` is set and the path is not included in the \`prerender\` config, so in production the path will be a 404.`), {
 					context: loadContext,
 					params,
@@ -155,26 +155,20 @@ const createRequestHandler = (build, mode) => {
 	};
 };
 async function handleManifestRequest(build, dataRoutes, branches, url) {
-	if (build.assets.version !== url.searchParams.get("version")) return new Response(null, {
-		status: 204,
-		headers: { "X-Remix-Reload-Document": "true" }
-	});
 	if (url.toString().length > 7680) return new Response(null, {
 		statusText: "Bad Request",
 		status: 400
 	});
+	if (build.assets.version !== url.searchParams.get("version")) return new Response(null, {
+		status: 204,
+		headers: { "X-Remix-Reload-Document": "true" }
+	});
 	let patches = {};
 	if (url.searchParams.has("paths")) {
-		let paths = /* @__PURE__ */ new Set();
-		(url.searchParams.get("paths") || "").split(",").filter(Boolean).forEach((path) => {
-			if (!path.startsWith("/")) path = `/${path}`;
-			let segments = path.split("/").slice(1);
-			segments.forEach((_, i) => {
-				let partialPath = segments.slice(0, i + 1).join("/");
-				paths.add(`/${partialPath}`);
-			});
-		});
+		let pathParam = url.searchParams.get("paths") || "";
+		let paths = new Set(pathParam.split(",").filter(Boolean));
 		for (let path of paths) {
+			if (!path.startsWith("/")) path = `/${path}`;
 			let matches = matchServerRoutes(build.routes, dataRoutes, branches, path, build.basename);
 			if (matches) for (let match of matches) {
 				let routeId = match.route.id;
@@ -192,7 +186,7 @@ async function handleSingleFetchRequest(serverMode, build, staticHandler, reques
 async function handleDocumentRequest(serverMode, build, staticHandler, request, loadContext, handleError, isSpaMode, criticalCss) {
 	try {
 		if (isMutationMethod(request.method)) try {
-			throwIfPotentialCSRFAttack(request.headers, Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []);
+			throwIfPotentialCSRFAttack(request, Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []);
 		} catch (e) {
 			handleError(e);
 			return new Response("Bad Request", { status: 400 });
@@ -209,7 +203,7 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
 					return new Response(null, { status: 500 });
 				}
 			},
-			normalizePath: (r) => getNormalizedPath(r, build.basename)
+			normalizePath: (r) => getNormalizedPath(r)
 		});
 		if (!isResponse(result)) result = await renderHtml(result, isSpaMode);
 		return result;
@@ -232,7 +226,7 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
 		let state = {
 			loaderData: context.loaderData,
 			actionData: context.actionData,
-			errors: serializeErrors(context.errors, serverMode)
+			errors: context.errors
 		};
 		let baseServerHandoff = {
 			basename: build.basename,
@@ -274,7 +268,7 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
 			let state = {
 				loaderData: context.loaderData,
 				actionData: context.actionData,
-				errors: serializeErrors(context.errors, serverMode)
+				errors: context.errors
 			};
 			entryContext = {
 				...entryContext,
@@ -304,7 +298,7 @@ async function handleResourceRequest(serverMode, build, staticHandler, routeId,
 					return handleQueryRouteError(error);
 				}
 			},
-			normalizePath: (r) => getNormalizedPath(r, build.basename)
+			normalizePath: (r) => getNormalizedPath(r)
 		}));
 	} catch (error) {
 		return handleQueryRouteError(error);

package/dist/production/lib/server-runtime/serverHandoff.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions/cookieStorage.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions/memoryStorage.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/single-fetch.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -22,7 +22,7 @@ const SERVER_NO_BODY_STATUS_CODES = new Set([...NO_BODY_STATUS_CODES, 304]);
 async function singleFetchAction(build, serverMode, staticHandler, request, loadContext, handleError) {
 	try {
 		try {
-			throwIfPotentialCSRFAttack(request.headers, Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []);
+			throwIfPotentialCSRFAttack(request, Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []);
 		} catch (e) {
 			return handleQueryError(/* @__PURE__ */ new Error("Bad Request"), 400);
 		}
@@ -37,7 +37,7 @@ async function singleFetchAction(build, serverMode, staticHandler, request, load
 					return handleQueryError(error);
 				}
 			},
-			normalizePath: (r) => getNormalizedPath(r, build.basename)
+			normalizePath: (r) => getNormalizedPath(r)
 		}));
 	} catch (error) {
 		return handleQueryError(error);
@@ -90,7 +90,7 @@ async function singleFetchLoaders(build, serverMode, staticHandler, request, loa
 					return handleQueryError(error);
 				}
 			},
-			normalizePath: (r) => getNormalizedPath(r, build.basename)
+			normalizePath: (r) => getNormalizedPath(r)
 		}));
 	} catch (error) {
 		return handleQueryError(error);

package/dist/production/lib/server-runtime/urls.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,15 +8,12 @@
  *
  * @license MIT
  */
-import { stripBasename } from "../router/utils.js";
 //#region lib/server-runtime/urls.ts
-function getNormalizedPath(request, basename) {
-	basename = basename || "/";
+function getNormalizedPath(request) {
 	let url = new URL(request.url);
 	let pathname = url.pathname;
 	if (pathname.endsWith("/_.data")) pathname = pathname.replace(/_\.data$/, "");
 	else pathname = pathname.replace(/\.data$/, "");
-	if (stripBasename(pathname, basename) !== "/" && pathname.endsWith("/")) pathname = pathname.slice(0, -1);
 	let searchParams = new URLSearchParams(url.search);
 	searchParams.delete("_routes");
 	let search = searchParams.toString();

package/dist/production/lib/server-runtime/warnings.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,6 +8,7 @@
  *
  * @license MIT
  */
+import "../../lib/router/utils.js";
 import { Deferred, createLineSplittingTransform } from "./utils.js";
 import { flatten } from "./flatten.js";
 import { unflatten } from "./unflatten.js";

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,7 +8,8 @@
  *
  * @license MIT
  */
-import { Deferred, SUPPORTED_ERROR_TYPES } from "./utils.js";
+import { SUPPORTED_ERROR_TYPES } from "../../lib/router/utils.js";
+import { Deferred } from "./utils.js";
 //#region vendor/turbo-stream-v2/unflatten.ts
 const globalObj = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : void 0;
 function unflatten(parsed) {

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,14 +9,6 @@
  * @license MIT
  */
 //#region vendor/turbo-stream-v2/utils.ts
-const SUPPORTED_ERROR_TYPES = [
-	"EvalError",
-	"RangeError",
-	"ReferenceError",
-	"SyntaxError",
-	"TypeError",
-	"URIError"
-];
 var Deferred = class {
 	promise;
 	resolve;
@@ -44,4 +36,4 @@ function createLineSplittingTransform() {
 	});
 }
 //#endregion
-export { Deferred, SUPPORTED_ERROR_TYPES, createLineSplittingTransform };
+export { Deferred, createLineSplittingTransform };

package/docs/explanation/code-splitting.md

@@ -74,4 +74,4 @@ export default function Component({ loaderData }) {
 
 After building for the browser, only the `Component` will still be in the bundle, so you can use server-only code in the other module exports.
 
-[route-module]: ../../start/framework/route-module
+[route-module]: ../start/framework/route-module

package/docs/explanation/index-query-param.md

@@ -80,7 +80,7 @@ function Component() {
 }
 ```
 
-[loader]: ../api/data-routers/loader
+[loader]: ../start/data/route-object#loader
 [form_element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
 [form_component]: ../api/components/Form
-[action]: ../api/data-routers/action
+[action]: ../start/data/route-object#action

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/data-strategy.md

@@ -158,11 +158,11 @@ const matchesToLoad = matches.filter((match) => {
 
 ## Migrating away from `shouldLoad`
 
-Now that we have stabilized the new `match.shouldCallHandler()`/`match.shouldRevalidateArgs` fields, it's recommended to move away from the now-deprecated `match.shouldLoad` API. The prior boolean approach did not allow for custom `dataStrategy`functions to alter the default revalidation behavior, so the new function-based APIs were created to allow that.
+Now that we have stabilized the new `match.shouldCallHandler()`/`match.shouldRevalidateArgs` fields, it's recommended to move away from the now-deprecated `match.shouldLoad` API. The prior boolean approach did not allow for custom `dataStrategy` functions to alter the default revalidation behavior, so the new function-based APIs were created to allow that.
 
 The major difference between these two APIs is that when using `shouldLoad`, calling `resolve()` would _only_ call the handler if `shouldLoad` was `true`. You could safely call it for all matches even if only a subset needed to have their handlers executed.
 
-With `shouldCallHandler`, you are in charge of which handlers should be called so calling resolve will automatically call the handler. You should only call resolve on a the set of matches you wish to run handlers for.
+With `shouldCallHandler`, you are in charge of which handlers should be called so calling resolve will automatically call the handler. You should only call resolve on the set of matches you wish to run handlers for.
 
 Here's an example change from the prior API to the new API. Note that we pre-filter the `matchesToLoad` before calling `resolve()`:
 
@@ -184,9 +184,9 @@ return results;
 
 <docs-info>This is an unlikely use-case now that React Router has built-in middleware, but if you wish to use a custom middleware you can do so with a `dataStrategy`.</docs-info>
 
-Let's define a middleware on each route via [`handle`](../../start/data/route-object#handle)
+Let's define a middleware on each route via [`handle`](../start/data/route-object#handle)
 and call middleware sequentially first, then call all
-[`loader`](../../start/data/route-object#loader)s in parallel - providing
+[`loader`](../start/data/route-object#loader)s in parallel - providing
 any data made available via the middleware:
 
 ```ts
@@ -258,7 +258,7 @@ let router = createBrowserRouter(routes, {
 
 ### Custom Handler
 
-It's also possible you don't even want to define a [`loader`](../../start/daoute-object#loader)
+It's also possible you don't even want to define a [`loader`](../start/data/route-object#loader)
 implementation at the route level. Maybe you want to just determine the
 routes and issue a single GraphQL request for all of your data. You can do
 that by setting your `route.loader=true` so it qualifies as "having a

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

@@ -104,7 +104,11 @@ See also:
 This function is called whenever React Router catches an error in your application on the client.
 
 ```tsx
-import { type ClientOnErrorFunction } from "react-router";
+import {
+  createBrowserRouter,
+  type ClientOnErrorFunction,
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 
 const onError: ClientOnErrorFunction = (
   error,
@@ -116,8 +120,12 @@ const onError: ClientOnErrorFunction = (
   console.error(error, errorInfo);
 };
 
+const router = createBrowserRouter(routes);
+
 function App() {
-  return <RouterProvider onError={onError} />;
+  return (
+    <RouterProvider router={router} onError={onError} />
+  );
 }
 ```
 

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/middleware.md

@@ -91,24 +91,18 @@ export default function Dashboard({
 }
 ```
 
-### 3. Update your `getLoadContext` function (if applicable)
+### 3. Add a `getLoadContext` function (if applicable)
 
-If you're using a custom server and a `getLoadContext` function, you will need to update your implementation to return an instance of [`RouterContextProvider`][RouterContextProvider], instead of a JavaScript object:
+If you're using a custom server, you can use a `getLoadContext` function to pass information to into the react router handlers:
 
-```diff
-+import {
-+  createContext,
-+  RouterContextProvider,
-+} from "react-router";
-import { createDb } from "./db";
-
-+const dbContext = createContext<Database>();
+```tsx
+import { RouterContextProvider } from "react-router";
+import { dbContext, createDb } from "./db";
 
 function getLoadContext(req, res) {
--  return { db: createDb() };
-+  const context = new RouterContextProvider();
-+  context.set(dbContext, createDb());
-+  return context;
+  const context = new RouterContextProvider();
+  context.set(dbContext, createDb());
+  return context;
 }
 ```
 
@@ -474,72 +468,6 @@ export const middleware: Route.MiddlewareFunction[] = [
 
 Which `ErrorBoundary` is rendered will differ based on whether your middleware threw _before_ or _after_ calling then `next()` function. If it throws _after_ then it will bubble up from the throwing route just like a normal loader error because we've already run the loaders and have the appropriate `loaderData` to render in the route components. However, if an error is thrown _before_ calling `next()`, then we haven't called any loaders yet and there is no `loaderData` available. When this happens, we must bubble up to the highest route with a `loader` and start looking for an `ErrorBoundary` there. We cannot render any route components at that level or below without any `loaderData`.
 
-## Changes to `getLoadContext`/`AppLoadContext`
-
-<docs-info>This only applies if you are using a custom server and a custom `getLoadContext` function</docs-info>
-
-Middleware introduces a breaking change to the `context` parameter generated by `getLoadContext` and passed to your `action`s and `loader`s. The current approach of a module-augmented `AppLoadContext` isn't really type-safe and instead just sort of tells TypeScript to "trust me".
-
-Middleware needs an equivalent `context` on the client for `clientMiddleware`, but we didn't want to duplicate this pattern from the server that we already weren't thrilled with, so we decided to introduce a new API where we could tackle type-safety.
-
-When opting into middleware, the `context` parameter changes to an instance of [`RouterContextProvider`][RouterContextProvider]:
-
-```ts
-let dbContext = createContext<Database>();
-let context = new RouterContextProvider();
-context.set(dbContext, getDb());
-//                     ^ type-safe
-let db = context.get(dbContext);
-//  ^ Database
-```
-
-If you're using a custom server and a `getLoadContext` function, you will need to update your implementation to return an instance of [`RouterContextProvider`][RouterContextProvider], instead of a plain JavaScript object:
-
-```diff
-+import {
-+  createContext,
-+  RouterContextProvider,
-+} from "react-router";
-import { createDb } from "./db";
-
-+const dbContext = createContext<Database>();
-
-function getLoadContext(req, res) {
--  return { db: createDb() };
-+  const context = new RouterContextProvider();
-+  context.set(dbContext, createDb());
-+  return context;
-}
-```
-
-### Migration from `AppLoadContext`
-
-If you're currently using `AppLoadContext`, you can migrate incrementally by using your existing module augmentation to augment [`RouterContextProvider`][RouterContextProvider] instead of `AppLoadContext`. Then, update your `getLoadContext` function to return an instance of [`RouterContextProvider`][RouterContextProvider]:
-
-```diff
-declare module "react-router" {
--  interface AppLoadContext {
-+  interface RouterContextProvider {
-    db: Database;
-    user: User;
-  }
-}
-
-function getLoadContext() {
-  const loadContext = {...};
--  return loadContext;
-+  let context = new RouterContextProvider();
-+  Object.assign(context, loadContext);
-+  return context;
-}
-```
-
-This allows you to leave your `action`s/`loader`s untouched during initial adoption of middleware, since they can still read values directly (i.e., `context.db`).
-
-<docs-warning>This approach is only intended to be used as a migration strategy when adopting middleware in React Router v7, allowing you to incrementally migrate to `context.set`/`context.get`. It is not safe to assume this approach will work in the next major version of React Router.</docs-warning>
-
-<docs-warning>The [`RouterContextProvider`][RouterContextProvider] class is also used for the client-side `context` parameter via `<HydratedRouter getContext>` and `<RouterProvider getContext>`. Since `AppLoadContext` is primarily intended as a hand-off from your HTTP server into the React Router handlers, you need to be aware that these augmented fields will not be available in `clientMiddleware`, `clientLoader`, or `clientAction` functions even thought TypeScript will tell you they are (unless, of course, you provide the fields via `getContext` on the client).</docs-warning>
-
 ## Common Patterns
 
 ### Authentication
@@ -700,24 +628,15 @@ export async function loader({
 }
 ```
 
-[future-flags]: ../upgrading/future
 [Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
 [common-patterns]: #common-patterns
 [server-client]: #server-vs-client-middleware
-[create-browser-router]: ../api/data-routers/createBrowserRouter
-[create-hash-router]: ../api/data-routers/createHashRouter
-[create-memory-router]: ../api/data-routers/createMemoryRouter
-[create-static-handler]: ../api/data-routers/createStaticHandler
 [framework-action]: ../start/framework/route-module#action
 [framework-loader]: ../start/framework/route-module#loader
-[getloadcontext]: #changes-to-getloadcontextapploadcontext
 [datastrategy]: ../api/data-routers/createBrowserRouter#optsdatastrategy
 [cms-redirect]: #cms-redirect-on-404
 [createContext]: ../api/utils/createContext
-[RouterContextProvider]: ../api/utils/RouterContextProvider
 [getContext]: ../api/data-routers/createBrowserRouter#optsgetContext
-[window]: https://developer.mozilla.org/en-US/docs/Web/API/Window
-[document]: https://developer.mozilla.org/en-US/docs/Web/API/Document
 [request]: https://developer.mozilla.org/en-US/docs/Web/API/Request
 [data-action]: ../start/data/route-object#action
 [data-loader]: ../start/data/route-object#loader

package/docs/how-to/security.md

@@ -13,18 +13,20 @@ 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
 [scripts]: ../api/components/Scripts
 [scrollrestoration]: ../api/components/ScrollRestoration
-[serverrouter]: ../api/components/ServerRouter
+[serverrouter]: ../api/framework-routers/ServerRouter

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/index.md

@@ -5,7 +5,7 @@ order: 1
 
 # React Router Home
 
-React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or as minimally as you want.
+React Router is a multi-strategy router for React. You can use it maximally as a React framework or as minimally as you want.
 
 ## Getting Started
 
@@ -29,11 +29,8 @@ These icons indicate which mode the content is relevant to.
 
 Additional auto-generated reference documentation is available:
 
-[Autogenerated Reference Docs ↗](https://api.reactrouter.com/v7/)
+[Autogenerated Reference Docs ↗](https://api.reactrouter.com/v8/)
 
 ## Upgrading
 
-If you are caught up on future flags, upgrading from React Router v6 or Remix v2 is generally non-breaking. Remix v2 apps are encouraged to upgrade to React Router v7.
-
-- [Upgrade from v6](./upgrading/v6)
-- [Upgrade from Remix](./upgrading/remix)
+If you are caught up on future flags, [upgrading from React Router v7](./upgrading/v7) is generally non-breaking.

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/data/route-object.md

@@ -240,9 +240,29 @@ createBrowserRouter([
 ]);
 ```
 
+## `handle`
+
+Route handle allows apps to add anything to a route match in `useMatches` to create abstractions (like breadcrumbs, etc.).
+
+```tsx
+createBrowserRouter([
+  {
+    path: "/app",
+    handle: {
+      breadcrumb: "App",
+    },
+  },
+]);
+```
+
+See also:
+
+- [`useMatches`][use-matches]
+
 ---
 
 Next: [Data Loading](./data-loading)
 
 [loader-params]: https://api.reactrouter.com/v7/interfaces/react-router.LoaderFunctionArgs
 [middleware]: ../../how-to/middleware
+[use-matches]: ../../api/hooks/useMatches

package/docs/start/framework/actions.md

@@ -172,4 +172,3 @@ See the [Using Fetchers][fetchers] guide for more information.
 Next: [Navigating](./navigating)
 
 [fetchers]: ../../how-to/fetchers
-[data]: ../../api/react-router/data

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

@@ -142,7 +142,7 @@ export async function clientLoader({
 }: Route.ClientLoaderArgs) {
   const res = await fetch(`/api/products/${params.pid}`);
   const serverData = await serverLoader();
-  return { ...serverData, ...res.json() };
+  return { ...serverData, ...(await res.json()) };
 }
 
 export default function Product({