react-router 8.1.0 → 8.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # `react-router`
 
+## v8.2.0
+
+### Patch Changes
+
+- Fix `href()` to properly stringify and URL-encode param values, matching `generatePath()` ([#15277](https://github.com/remix-run/react-router/pull/15277))
+  - splat params preserve path separators while encoding each segment individually
+- Fix dynamic param extraction for routes with optional static segments ([#15200](https://github.com/remix-run/react-router/pull/15200))
+  - When a route path contains optional static segments (e.g. `/school?/user/:id`), the internal regex's incorrectly shifted parameter indices resulting in incorrect parameter extraction
+  - Consecutive optional static segments (e.g. `/one?/two?`) were only partially handled
+- Preserve navigation blocker state through a revalidation ([#15246](https://github.com/remix-run/react-router/pull/15246))
+- Fix route ranking for dynamic parameters with static extension suffixes ([#15273](https://github.com/remix-run/react-router/pull/15273))
+  - These were not being detected as dynamic param segments and instead got incorrectly scored higher as a static segment
+  - This meant they could potentially tie truly static routes like `/sitemap.xml` and outrank them based on definition order
+  - These are now correctly identified as dynamic parameter segments and scored correctly
+- Use ReactFormState types instead of unknown ([#15263](https://github.com/remix-run/react-router/pull/15263))
+
 ## v8.1.0
 
 ### Minor Changes

package/dist/development/dom-export.js

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

package/dist/development/index-react-server-client.js

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

package/dist/development/index-react-server.d.ts

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { CookieParseOptions, CookieParseOptions as CookieParseOptions$1, CookieSerializeOptions, CookieSerializeOptions as CookieSerializeOptions$1 } from "cookie-es";
 import { BrowserRouter, Form, HashRouter, Link, Links, MemoryRouter, Meta, NavLink, Navigate, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, StaticRouter, StaticRouterProvider, unstable_HistoryRouter } from "react-router/internal/react-server-client";
+import { ReactFormState } from "react-dom/client";
 
 //#region lib/router/history.d.ts
 /**
@@ -2324,7 +2325,7 @@ type RSCRenderPayload = {
   matches: RSCRouteMatch[];
   patches?: Promise<RSCRouteManifest[]>;
   nonce?: string;
-  formState?: unknown;
+  formState?: ReactFormState;
 };
 type RSCManifestPayload = {
   type: "manifest";
@@ -2350,7 +2351,7 @@ type RSCMatch = {
   payload: RSCPayload;
 };
 type DecodeActionFunction = (formData: FormData) => Promise<() => Promise<unknown>>;
-type DecodeFormStateFunction = (result: unknown, formData: FormData) => unknown;
+type DecodeFormStateFunction = (result: unknown, formData: FormData) => Promise<ReactFormState | undefined>;
 type DecodeReplyFunction = (reply: FormData | string, options: {
   temporaryReferences: unknown;
 }) => Promise<unknown[]>;

package/dist/development/index-react-server.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -389,6 +389,8 @@ function rankRouteBranches(branches) {
 	branches.sort((a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(a.routesMeta.map((meta) => meta.childrenIndex), b.routesMeta.map((meta) => meta.childrenIndex)));
 }
 const paramRe = /^:[\w-]+$/;
+const partialParamRe = /^:[\w-]+/;
+const partialDynamicSegmentValue = 3.5;
 const dynamicSegmentValue = 3;
 const indexRouteValue = 2;
 const emptySegmentValue = 1;
@@ -400,7 +402,7 @@ function computeScore(path, index) {
 	let initialScore = segments.length;
 	if (segments.some(isSplat)) initialScore += splatPenalty;
 	if (index) initialScore += indexRouteValue;
-	return segments.filter((s) => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
+	return segments.filter((s) => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : partialParamRe.test(segment) ? partialDynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
 }
 function compareIndexes(a, b) {
 	return a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]) ? a[a.length - 1] - b[b.length - 1] : 0;
@@ -497,7 +499,7 @@ function compilePath(path, caseSensitive = false, end = true) {
 			return "(?:/([^\\/]*))?";
 		}
 		return "/([^\\/]+)";
-	}).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
+	}).replace(/\/([\w-]+)\?(?=\/|$|\()/g, "(?:/$1)?");
 	if (path.endsWith("*")) {
 		params.push({ paramName: "*" });
 		regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
@@ -2468,7 +2470,7 @@ async function processServerAction(request, basename, decodeReply, loadServerAct
 			try {
 				let result = await action();
 				if (isRedirectResponse(result)) result = prependBasenameToRedirectResponse(result, basename);
-				formState = decodeFormState?.(result, formData);
+				formState = await decodeFormState?.(result, formData);
 			} catch (error) {
 				if (isRedirectResponse(error)) return prependBasenameToRedirectResponse(error, basename);
 				if (isResponse(error)) return error;
@@ -2806,6 +2808,9 @@ function canDecodeWithFormData(contentType) {
 }
 //#endregion
 //#region lib/href.ts
+function stringify(p) {
+	return p == null ? "" : typeof p === "string" ? p : String(p);
+}
 /**
 Returns a resolved URL path for the specified route.
 
@@ -2822,11 +2827,11 @@ function href(path, ...args) {
 		const isRequired = questionMark === void 0;
 		const value = params?.[param];
 		if (isRequired && value === void 0) throw new Error(`Path '${path}' requires param '${param}' but it was not provided`);
-		return value === void 0 ? "" : "/" + value;
+		return value == null ? "" : "/" + encodeURIComponent(stringify(value));
 	});
 	if (path.endsWith("*")) {
 		const value = params?.["*"];
-		if (value !== void 0) result += "/" + value;
+		if (value !== void 0) result += "/" + stringify(value).split("/").map(encodeURIComponent).join("/");
 	}
 	return result || "/";
 }

package/dist/development/index.js

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

package/dist/development/lib/actions.js

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

package/dist/development/lib/components.js

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

package/dist/development/lib/context.js

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

package/dist/development/lib/dom/dom.js

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

package/dist/development/lib/dom/lib.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -22,7 +22,7 @@ import * as React$1 from "react";
 //#region lib/dom/lib.tsx
 const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 try {
-	if (isBrowser) window.__reactRouterVersion = "8.1.0";
+	if (isBrowser) window.__reactRouterVersion = "8.2.0";
 } catch (e) {}
 /**
 * Create a new {@link DataRouter| data router} that manages the application

package/dist/development/lib/dom/server.js

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

package/dist/development/lib/dom/ssr/components.js

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

package/dist/development/lib/dom/ssr/data.js

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

package/dist/development/lib/dom/ssr/errorBoundaries.js

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

package/dist/development/lib/dom/ssr/fallback.js

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

package/dist/development/lib/dom/ssr/fog-of-war.js

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

package/dist/development/lib/dom/ssr/hydration.js

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

package/dist/development/lib/dom/ssr/invariant.js

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

package/dist/development/lib/dom/ssr/links.js

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

package/dist/development/lib/dom/ssr/markup.js

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

package/dist/development/lib/dom/ssr/routeModules.js

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

package/dist/development/lib/dom/ssr/routes-test-stub.js

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

package/dist/development/lib/dom/ssr/routes.js

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

package/dist/development/lib/dom/ssr/server.js

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

package/dist/development/lib/dom/ssr/single-fetch.js

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

package/dist/development/lib/dom-export/dom-router-provider.js

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

package/dist/development/lib/dom-export/hydrated-router.js

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

package/dist/development/lib/errors.js

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

package/dist/development/lib/hooks.d.ts

@@ -143,12 +143,16 @@ interface NavigateFunction {
  * All properties are optional.
  *
  * ```tsx
- * navigate({
- *   pathname: "/some/route",
- *   search: "?search=param",
- *   hash: "#hash",
- *   state: { some: "state" },
- * });
+ * navigate(
+ *   {
+ *     pathname: "/some/route",
+ *     search: "?search=param",
+ *     hash: "#hash",
+ *   },
+ *   {
+ *     state: { some: "state" },
+ *   },
+ * );
  * ```
  *
  * If you use `state`, that will be available on the {@link Location} object on
@@ -576,6 +580,29 @@ declare function useRevalidator(): {
  * parent/child routes or the route [`handle`](../../start/framework/route-module#handle)
  * property
  *
+ * Pairing the route `handle` with `useMatches` gets very powerful since you can put
+ * whatever you want on a route handle and have access to `useMatches` anywhere.
+ * Please see the [handle](../../how-to/using-handle) documentation for an example
+ * of breadcrumbs via `useMatches`/`handle`.
+ *
+ * ```tsx
+ * import { useMatches } from "react-router";
+ *
+ * function SomeComponent() {
+ *   const matches = useMatches();
+ *   // matches[i].id          // route id
+ *   // matches[i].pathname    // the portion of the URL the route matched
+ *   // matches[i].params      // the parsed params from the URL
+ *   // matches[i].loaderData  // the data from the loader
+ *   // matches[i].handle      // the route handle with any app specific data
+ * }
+ * ```
+ *
+ * <docs-info>useMatches only works with a data router like `createBrowserRouter`,
+ * since they know the full route tree up front and can provide all of the current
+ * matches. Additionally, `useMatches` will not match down into any descendant route
+ * trees since the router isn't aware of the descendant routes.</docs-info>
+ *
  * @public
  * @category Hooks
  * @mode framework

package/dist/development/lib/hooks.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -162,12 +162,16 @@ const navigateEffectWarning = "You should call navigate() in a React.useEffect()
 * All properties are optional.
 *
 * ```tsx
-* navigate({
-*   pathname: "/some/route",
-*   search: "?search=param",
-*   hash: "#hash",
-*   state: { some: "state" },
-* });
+* navigate(
+*   {
+*     pathname: "/some/route",
+*     search: "?search=param",
+*     hash: "#hash",
+*   },
+*   {
+*     state: { some: "state" },
+*   },
+* );
 * ```
 *
 * If you use `state`, that will be available on the {@link Location} object on
@@ -919,6 +923,29 @@ function useRevalidator() {
 * parent/child routes or the route [`handle`](../../start/framework/route-module#handle)
 * property
 *
+* Pairing the route `handle` with `useMatches` gets very powerful since you can put
+* whatever you want on a route handle and have access to `useMatches` anywhere.
+* Please see the [handle](../../how-to/using-handle) documentation for an example
+* of breadcrumbs via `useMatches`/`handle`.
+*
+* ```tsx
+* import { useMatches } from "react-router";
+*
+* function SomeComponent() {
+*   const matches = useMatches();
+*   // matches[i].id          // route id
+*   // matches[i].pathname    // the portion of the URL the route matched
+*   // matches[i].params      // the parsed params from the URL
+*   // matches[i].loaderData  // the data from the loader
+*   // matches[i].handle      // the route handle with any app specific data
+* }
+* ```
+*
+* <docs-info>useMatches only works with a data router like `createBrowserRouter`,
+* since they know the full route tree up front and can provide all of the current
+* matches. Additionally, `useMatches` will not match down into any descendant route
+* trees since the router isn't aware of the descendant routes.</docs-info>
+*
 * @public
 * @category Hooks
 * @mode framework

package/dist/development/lib/href.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,6 +9,9 @@
  * @license MIT
  */
 //#region lib/href.ts
+function stringify(p) {
+	return p == null ? "" : typeof p === "string" ? p : String(p);
+}
 /**
 Returns a resolved URL path for the specified route.
 
@@ -25,11 +28,11 @@ function href(path, ...args) {
 		const isRequired = questionMark === void 0;
 		const value = params?.[param];
 		if (isRequired && value === void 0) throw new Error(`Path '${path}' requires param '${param}' but it was not provided`);
-		return value === void 0 ? "" : "/" + value;
+		return value == null ? "" : "/" + encodeURIComponent(stringify(value));
 	});
 	if (path.endsWith("*")) {
 		const value = params?.["*"];
-		if (value !== void 0) result += "/" + value;
+		if (value !== void 0) result += "/" + stringify(value).split("/").map(encodeURIComponent).join("/");
 	}
 	return result || "/";
 }

package/dist/development/lib/router/history.js

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

package/dist/development/lib/router/instrumentation.js

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

package/dist/development/lib/router/router.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -341,7 +341,7 @@ function createRouter(init) {
 		else actionData = null;
 		let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData;
 		let blockers = state.blockers;
-		if (blockers.size > 0) {
+		if (blockers.size > 0 && !isUninterruptedRevalidation) {
 			blockers = new Map(blockers);
 			blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
 		}

package/dist/development/lib/router/url.js

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

package/dist/development/lib/router/utils.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -323,6 +323,8 @@ function rankRouteBranches(branches) {
 	branches.sort((a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(a.routesMeta.map((meta) => meta.childrenIndex), b.routesMeta.map((meta) => meta.childrenIndex)));
 }
 const paramRe = /^:[\w-]+$/;
+const partialParamRe = /^:[\w-]+/;
+const partialDynamicSegmentValue = 3.5;
 const dynamicSegmentValue = 3;
 const indexRouteValue = 2;
 const emptySegmentValue = 1;
@@ -334,7 +336,7 @@ function computeScore(path, index) {
 	let initialScore = segments.length;
 	if (segments.some(isSplat)) initialScore += splatPenalty;
 	if (index) initialScore += indexRouteValue;
-	return segments.filter((s) => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
+	return segments.filter((s) => !isSplat(s)).reduce((score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : partialParamRe.test(segment) ? partialDynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
 }
 function compareIndexes(a, b) {
 	return a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]) ? a[a.length - 1] - b[b.length - 1] : 0;
@@ -465,7 +467,7 @@ function compilePath(path, caseSensitive = false, end = true) {
 			return "(?:/([^\\/]*))?";
 		}
 		return "/([^\\/]+)";
-	}).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
+	}).replace(/\/([\w-]+)\?(?=\/|$|\()/g, "(?:/$1)?");
 	if (path.endsWith("*")) {
 		params.push({ paramName: "*" });
 		regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";

package/dist/development/lib/rsc/browser.js

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

package/dist/development/lib/rsc/errorBoundaries.js

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

package/dist/development/lib/rsc/html-stream/browser.js

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

package/dist/development/lib/rsc/html-stream/server.js

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

package/dist/development/lib/rsc/route-modules.js

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

package/dist/development/lib/rsc/server.rsc.d.ts

@@ -3,6 +3,7 @@ import { Location } from "../router/history.js";
 import { ActionFunction, LoaderFunction, Params, RouterContextProvider, ShouldRevalidateFunction } from "../router/utils.js";
 import { ClientActionFunction, ClientLoaderFunction, HeadersFunction, LinksFunction, MetaFunction } from "../dom/ssr/routeModules.js";
 import * as React$1 from "react";
+import { ReactFormState } from "react-dom/client";
 
 //#region lib/rsc/server.rsc.d.ts
 declare function getRequest(): Request;
@@ -71,7 +72,7 @@ type RSCRenderPayload = {
   matches: RSCRouteMatch[];
   patches?: Promise<RSCRouteManifest[]>;
   nonce?: string;
-  formState?: unknown;
+  formState?: ReactFormState;
 };
 type RSCManifestPayload = {
   type: "manifest";
@@ -97,7 +98,7 @@ type RSCMatch = {
   payload: RSCPayload;
 };
 type DecodeActionFunction = (formData: FormData) => Promise<() => Promise<unknown>>;
-type DecodeFormStateFunction = (result: unknown, formData: FormData) => unknown;
+type DecodeFormStateFunction = (result: unknown, formData: FormData) => Promise<ReactFormState | undefined>;
 type DecodeReplyFunction = (reply: FormData | string, options: {
   temporaryReferences: unknown;
 }) => Promise<unknown[]>;

package/dist/development/lib/rsc/server.ssr.js

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

package/dist/development/lib/server-runtime/cookies.js

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

package/dist/development/lib/server-runtime/crypto.js

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