react-router 8.2.0 → 8.3.1

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.2.0
+ * react-router v8.3.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -24,7 +24,7 @@ function warning(cond, message) {
 		if (typeof console !== "undefined") console.warn(message);
 		try {
 			throw new Error(message);
-		} catch (e) {}
+		} catch {}
 	}
 }
 function createKey$1() {
@@ -47,7 +47,10 @@ function createLocation(current, to, state = null, key, mask) {
 /**
 * Creates a string URL path from the given pathname, search, and hash components.
 *
+* @public
 * @category Utils
+* @param path The pathname, search, and hash components to combine.
+* @returns The combined URL path.
 */
 function createPath({ pathname = "/", search = "", hash = "" }) {
 	if (search && search !== "?") pathname += search.charAt(0) === "?" ? search : "?" + search;
@@ -57,7 +60,10 @@ function createPath({ pathname = "/", search = "", hash = "" }) {
 /**
 * Parses a string URL path into its separate pathname, search, and hash components.
 *
+* @public
 * @category Utils
+* @param path The URL path to parse.
+* @returns The parsed pathname, search, and hash components.
 */
 function parsePath(path) {
 	let parsedPath = {};
@@ -432,6 +438,48 @@ function matchRouteBranch(branch, pathname, allowPartial = false) {
 	return matches;
 }
 /**
+* Characters that `encodeURIComponent` escapes but that are valid literally in
+* a URL path segment. Per RFC 3986 §3.3, a path segment is made of `pchar`:
+*
+* ```
+* pchar = unreserved / pct-encoded / sub-delims / ":" / "@"
+* sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="
+* ```
+*
+* `encodeURIComponent` targets query-string values, where `$ & + , ; = : @`
+* are delimiters and must be escaped — but in a path segment they carry no
+* special meaning, and browsers keep them literal in `location.pathname`.
+* (`! ' ( ) *` and the unreserved set are already left alone by
+* `encodeURIComponent`, so they need no restoring.)
+*/
+const PATH_PARAM_OVERESCAPED = {
+	"%24": "$",
+	"%26": "&",
+	"%2B": "+",
+	"%2C": ",",
+	"%3A": ":",
+	"%3B": ";",
+	"%3D": "=",
+	"%40": "@"
+};
+/**
+* Encodes a param value for interpolation into a single URL path segment.
+*
+* Escapes characters that would break the path (`/ ? # %`, whitespace,
+* non-ASCII, …) while leaving characters that RFC 3986 permits literally in a
+* path segment untouched. Escaping those would needlessly rewrite URLs — e.g.
+*  a semver build param `1.0.0+1` would become `1.0.0%2B1` even though browsers
+* display and match the `+` literally in `location.pathname`.
+*
+* See [RFC 3986 §3.3](https://datatracker.ietf.org/doc/html/rfc3986#section-3.3))
+*
+* @param value The param value to encode.
+* @returns The encoded value, safe for use as a single path segment.
+*/
+function encodePathParam(value) {
+	return encodeURIComponent(value).replace(/%(?:24|26|2B|2C|3A|3B|3D|40)/g, (match) => PATH_PARAM_OVERESCAPED[match]);
+}
+/**
 * Performs pattern matching on a URL pathname and returns information about
 * the match.
 *
@@ -458,13 +506,13 @@ function matchPathImpl(pattern, pathname, matcher, compiledParams) {
 	let match = pathname.match(matcher);
 	if (!match) return null;
 	let matchedPathname = match[0];
-	let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
+	let pathnameBase = removeTrailingSlash(matchedPathname, 1);
 	let captureGroups = match.slice(1);
 	return {
 		params: compiledParams.reduce((memo, { paramName, isOptional }, index) => {
 			if (paramName === "*") {
 				let splatValue = captureGroups[index] || "";
-				pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
+				pathnameBase = removeTrailingSlash(matchedPathname.slice(0, matchedPathname.length - splatValue.length), 1);
 			}
 			const value = captureGroups[index];
 			if (isOptional && !value) memo[paramName] = void 0;
@@ -533,7 +581,7 @@ function resolvePath(to, fromPathname = "/") {
 	let pathname;
 	if (toPathname) {
 		toPathname = removeDoubleSlashes(toPathname);
-		if (toPathname.startsWith("/")) pathname = resolvePathname(toPathname.substring(1), "/");
+		if (toPathname.startsWith("/") || toPathname.startsWith("\\")) pathname = resolvePathname(toPathname.substring(1), "/");
 		else pathname = resolvePathname(toPathname, fromPathname);
 	} else pathname = fromPathname;
 	return {
@@ -594,7 +642,11 @@ function resolveTo(toArg, routePathnames, locationPathname, isPathRelative = fal
 }
 const removeDoubleSlashes = (path) => path.replace(/[\\/]{2,}/g, "/");
 const joinPaths = (paths) => removeDoubleSlashes(paths.join("/"));
-const removeTrailingSlash = (path) => path.replace(/\/+$/, "");
+function removeTrailingSlash(path, minLength = 0) {
+	let end = path.length;
+	while (end > minLength && path.charCodeAt(end - 1) === 47) end--;
+	return end === path.length ? path : path.slice(0, end);
+}
 const normalizePathname = (pathname) => removeTrailingSlash(pathname).replace(/^\/*/, "/");
 const normalizeSearch = (search) => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
 const normalizeHash = (hash) => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
@@ -1759,7 +1811,7 @@ async function callDataStrategyImpl(dataStrategyImpl, request, path, matches, fe
 	});
 	try {
 		await Promise.all(matches.flatMap((m) => [m._lazyPromises?.handler, m._lazyPromises?.route]));
-	} catch (e) {}
+	} catch {}
 	return results;
 }
 async function callLoaderOrAction({ request, path, pattern, match, lazyHandlerPromise, lazyRoutePromise, handlerOverride, scopedContext }) {
@@ -2160,14 +2212,19 @@ function getPathsWithAncestors(paths) {
 function throwIfPotentialCSRFAttack(request, allowedActionOrigins) {
 	let originHeader = request.headers.get("origin");
 	let originDomain = null;
+	let originUrl = null;
 	try {
-		originDomain = typeof originHeader === "string" && originHeader !== "null" ? new URL(originHeader).host : originHeader;
+		if (typeof originHeader === "string" && originHeader !== "null") {
+			originUrl = new URL(originHeader);
+			originDomain = originUrl.host;
+		} else originDomain = originHeader;
 	} catch {
 		throw new Error(`\`origin\` header is not a valid URL. Aborting the action.`);
 	}
-	let host = new URL(request.url).host;
-	if (originDomain && originDomain !== host) {
-		if (!isAllowedOrigin(originDomain, allowedActionOrigins)) throw new Error("The `request.url` host does not match `origin` header from a forwarded action request. Aborting the action.");
+	let requestUrl = new URL(request.url);
+	let originMatchesRequest = originUrl ? originUrl.origin === requestUrl.origin : originDomain === requestUrl.host;
+	if (originDomain && !originMatchesRequest) {
+		if (!isAllowedOrigin(originDomain, allowedActionOrigins)) throw new Error("The `request.url` origin does not match `origin` header from a forwarded action request. Aborting the action.");
 	}
 }
 function matchWildcardDomain(domain, pattern) {
@@ -2323,6 +2380,8 @@ const Await = (async ({ children, resolve, errorElement }) => {
 * encoding the {@link unstable_RSCPayload}.
 * @param opts.loadServerAction Your `react-server-dom-xyz/server`'s
 * `loadServerAction` function, used to load a server action by ID.
+* @param opts.clientVersion A version derived from the client build output used
+* to detect stale clients during lazy route discovery.
 * @param opts.onError An optional error handler that will be called with any
 * errors that occur during the request processing.
 * @param opts.request The [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
@@ -2336,7 +2395,7 @@ const Await = (async ({ children, resolve, errorElement }) => {
 * that contains the [RSC](https://react.dev/reference/rsc/server-components)
 * data for hydration.
 */
-async function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, routeDiscovery, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse }) {
+async function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, routeDiscovery, loadServerAction, decodeAction, decodeFormState, clientVersion, onError, request, routes, generateResponse }) {
 	let url = new URL(request.url);
 	basename = basename || "/";
 	let normalizedPath = url.pathname;
@@ -2354,22 +2413,26 @@ async function matchRSCServerRequest({ allowedActionOrigins, createTemporaryRefe
 	});
 	const temporaryReferences = createTemporaryReferenceSet();
 	const requestUrl = new URL(request.url);
-	if (isManifestRequest(requestUrl)) return await generateManifestResponse(routes, basename, request, generateResponse, temporaryReferences, routeDiscovery);
+	if (isManifestRequest(requestUrl)) return await generateManifestResponse(routes, basename, request, generateResponse, temporaryReferences, routeDiscovery, clientVersion);
 	let isDataRequest = isReactServerRequest(requestUrl);
 	let matches = matchRoutes(routes, url.pathname, basename);
 	if (matches) await Promise.all(matches.map((m) => explodeLazyRoute(m.route)));
 	const leafMatch = matches?.[matches.length - 1];
 	if (!isDataRequest && leafMatch && !leafMatch.route.Component && !leafMatch.route.ErrorBoundary) return generateResourceResponse(routerRequest, routes, basename, leafMatch.route.id, requestContext, onError);
-	let response = await generateRenderResponse(routerRequest, routes, basename, isDataRequest, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, generateResponse, temporaryReferences, allowedActionOrigins, routeDiscovery);
+	let response = await generateRenderResponse(routerRequest, routes, basename, isDataRequest, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, generateResponse, temporaryReferences, allowedActionOrigins, routeDiscovery, clientVersion);
 	response.headers.set("X-Remix-Response", "yes");
 	return response;
 }
-async function generateManifestResponse(routes, basename, request, generateResponse, temporaryReferences, routeDiscovery) {
+async function generateManifestResponse(routes, basename, request, generateResponse, temporaryReferences, routeDiscovery, clientVersion) {
 	let url = new URL(request.url);
 	if (url.toString().length > 7680) return new Response(null, {
 		statusText: "Bad Request",
 		status: 400
 	});
+	if (clientVersion !== void 0 && clientVersion !== url.searchParams.get("version")) return new Response(null, {
+		status: 204,
+		headers: { "X-Remix-Reload-Document": "true" }
+	});
 	if (routeDiscovery?.mode === "initial") {
 		let payload = {
 			type: "manifest",
@@ -2518,7 +2581,7 @@ async function generateResourceResponse(request, routes, basename, routeId, requ
 		});
 	}
 }
-async function generateRenderResponse(request, routes, basename, isDataRequest, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, generateResponse, temporaryReferences, allowedActionOrigins, routeDiscovery) {
+async function generateRenderResponse(request, routes, basename, isDataRequest, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, generateResponse, temporaryReferences, allowedActionOrigins, routeDiscovery, clientVersion) {
 	let statusCode = 200;
 	let url = new URL(request.url);
 	let isSubmission = isMutationMethod(request.method);
@@ -2539,29 +2602,39 @@ async function generateRenderResponse(request, routes, basename, isDataRequest,
 			let formState;
 			let skipRevalidation = false;
 			let potentialCSRFAttackError;
-			if (isMutationMethod(request.method)) try {
-				throwIfPotentialCSRFAttack(request, allowedActionOrigins);
-				ctx.runningAction = true;
-				let result = await processServerAction(request, basename, decodeReply, loadServerAction, decodeAction, decodeFormState, onError, temporaryReferences).finally(() => {
-					ctx.runningAction = false;
-				});
-				if (isResponse(result)) return generateRedirectResponse(result, actionResult, basename, isDataRequest, generateResponse, temporaryReferences, ctx.redirect?.headers);
-				skipRevalidation = result?.skipRevalidation ?? false;
-				actionResult = result?.actionResult;
-				formState = result?.formState;
-				request = result?.revalidationRequest ?? request;
-				if (ctx.redirect) return generateRedirectResponse(ctx.redirect, actionResult, basename, isDataRequest, generateResponse, temporaryReferences, void 0);
-			} catch (error) {
-				potentialCSRFAttackError = error;
+			if (isMutationMethod(request.method)) {
+				try {
+					throwIfPotentialCSRFAttack(request, allowedActionOrigins);
+				} catch (error) {
+					onError?.(error);
+					potentialCSRFAttackError = error;
+					request = new Request(request.url, {
+						method: "GET",
+						headers: request.headers,
+						signal: request.signal
+					});
+				}
+				if (!potentialCSRFAttackError) {
+					ctx.runningAction = true;
+					let result = await processServerAction(request, basename, decodeReply, loadServerAction, decodeAction, decodeFormState, onError, temporaryReferences).finally(() => {
+						ctx.runningAction = false;
+					});
+					if (isResponse(result)) return generateRedirectResponse(result, actionResult, basename, isDataRequest, generateResponse, temporaryReferences, ctx.redirect?.headers);
+					skipRevalidation = result?.skipRevalidation ?? false;
+					actionResult = result?.actionResult;
+					formState = result?.formState;
+					request = result?.revalidationRequest ?? request;
+					if (ctx.redirect) return generateRedirectResponse(ctx.redirect, actionResult, basename, isDataRequest, generateResponse, temporaryReferences, void 0);
+				}
 			}
-			let staticContext = await query(request, skipRevalidation || !!potentialCSRFAttackError ? { filterMatchesToLoad: () => false } : void 0);
+			let staticContext = await query(request, skipRevalidation ? { filterMatchesToLoad: () => false } : void 0);
 			if (isResponse(staticContext)) return generateRedirectResponse(staticContext, actionResult, basename, isDataRequest, generateResponse, temporaryReferences, ctx.redirect?.headers);
 			if (potentialCSRFAttackError) {
 				staticContext.errors ??= {};
 				staticContext.errors[staticContext.matches[0].route.id] = potentialCSRFAttackError;
 				staticContext.statusCode = 400;
 			}
-			return generateStaticContextResponse(routes, basename, generateResponse, statusCode, routeIdsToLoad, isDataRequest, isSubmission, actionResult, formState, staticContext, temporaryReferences, skipRevalidation, ctx.redirect?.headers, routeDiscovery);
+			return generateStaticContextResponse(routes, basename, generateResponse, statusCode, routeIdsToLoad, isDataRequest, isSubmission, actionResult, formState, staticContext, temporaryReferences, skipRevalidation, ctx.redirect?.headers, routeDiscovery, clientVersion);
 		}
 	}));
 	if (isRedirectResponse(result)) return generateRedirectResponse(result, actionResult, basename, isDataRequest, generateResponse, temporaryReferences, ctx.redirect?.headers);
@@ -2595,7 +2668,7 @@ function generateRedirectResponse(response, actionResult, basename, isDataReques
 		onError: defaultOnError
 	});
 }
-async function generateStaticContextResponse(routes, basename, generateResponse, statusCode, routeIdsToLoad, isDataRequest, isSubmission, actionResult, formState, staticContext, temporaryReferences, skipRevalidation, sideEffectRedirectHeaders, routeDiscovery) {
+async function generateStaticContextResponse(routes, basename, generateResponse, statusCode, routeIdsToLoad, isDataRequest, isSubmission, actionResult, formState, staticContext, temporaryReferences, skipRevalidation, sideEffectRedirectHeaders, routeDiscovery, clientVersion) {
 	statusCode = staticContext.statusCode ?? statusCode;
 	if (staticContext.errors) staticContext.errors = Object.fromEntries(Object.entries(staticContext.errors).map(([key, error]) => [key, isRouteErrorResponse(error) ? Object.fromEntries(Object.entries(error)) : error]));
 	staticContext.matches.forEach((m) => {
@@ -2608,6 +2681,7 @@ async function generateStaticContextResponse(routes, basename, generateResponse,
 	const baseRenderPayload = {
 		type: "render",
 		basename: staticContext.basename,
+		clientVersion,
 		routeDiscovery: routeDiscovery ?? { mode: "lazy" },
 		actionData: staticContext.actionData,
 		errors: staticContext.errors,
@@ -2803,14 +2877,30 @@ function stringify(p) {
 	return p == null ? "" : typeof p === "string" ? p : String(p);
 }
 /**
-Returns a resolved URL path for the specified route.
-
-```tsx
-const h = href("/:lang?/about", { lang: "en" })
-// -> `/en/about`
-
-<Link to={href("/products/:id", { id: "abc123" })} />
-```
+* Returns a resolved URL path for the specified route.
+*
+* Param values are percent-encoded for use in a path segment: characters that
+* would change the URL structure (`/`, `?`, `#`, `%`, whitespace, non-ASCII)
+* are escaped, while characters that RFC 3986 allows literally in a path
+* segment (`$ & + , ; = : @`) are kept as-is. Note this differs from query-string
+* encoding (`encodeURIComponent`/`URLSearchParams`), where those characters are
+* delimiters and must be escaped. Splat (`*`) values are encoded per segment,
+* preserving `/` separators.
+*
+* See [RFC 3986 §3.3](https://datatracker.ietf.org/doc/html/rfc3986#section-3.3)
+*
+* @example
+* const h = href("/:lang?/about", { lang: "en" })
+* // -> `/en/about`
+*
+* <Link to={href("/products/:id", { id: "abc123" })} />
+*
+* @public
+* @category Utils
+* @mode framework
+* @param path The route path to resolve
+* @param args The route params to use when resolving the path
+* @returns The resolved URL path
 */
 function href(path, ...args) {
 	let params = args[0];
@@ -2818,11 +2908,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 == null ? "" : "/" + encodeURIComponent(stringify(value));
+		return value == null ? "" : "/" + encodePathParam(stringify(value));
 	});
 	if (path.endsWith("*")) {
 		const value = params?.["*"];
-		if (value !== void 0) result += "/" + stringify(value).split("/").map(encodeURIComponent).join("/");
+		if (value !== void 0) result += "/" + stringify(value).split("/").map(encodePathParam).join("/");
 	}
 	return result || "/";
 }
@@ -2858,7 +2948,7 @@ const unsign = async (cookie, secret) => {
 	try {
 		let signature = byteStringToUint8Array(atob(hash));
 		return await crypto.subtle.verify("HMAC", key, signature, data) ? value : false;
-	} catch (e) {
+	} catch {
 		return false;
 	}
 };
@@ -2875,6 +2965,14 @@ function byteStringToUint8Array(byteString) {
 //#region lib/server-runtime/cookies.ts
 /**
 * Creates a logical container for managing a browser cookie from the server.
+*
+* @public
+* @category Utils
+* @mode framework
+* @mode data
+* @param name The name of the cookie.
+* @param cookieOptions Options for parsing and serializing the cookie.
+* @returns A {@link Cookie} object for parsing and serializing the cookie.
 */
 const createCookie = (name, cookieOptions = {}) => {
 	let { secrets = [], ...options } = {
@@ -2914,9 +3012,15 @@ const createCookie = (name, cookieOptions = {}) => {
 	};
 };
 /**
-* Returns true if an object is a Remix cookie container.
+* Returns `true` if a value is a React Router {@link Cookie} object.
 *
-* @see https://remix.run/utils/cookies#iscookie
+* @public
+* @category Utils
+* @mode framework
+* @mode data
+* @param object The value to check.
+* @returns `true` if the value is a React Router {@link Cookie} object;
+* otherwise, `false`.
 */
 const isCookie = (object) => {
 	return object != null && typeof object.name === "string" && typeof object.isSigned === "boolean" && typeof object.parse === "function" && typeof object.serialize === "function";
@@ -2942,7 +3046,7 @@ function encodeData(value) {
 function decodeData(value) {
 	try {
 		return JSON.parse(decodeURIComponent(myEscape(atob(value))));
-	} catch (e) {
+	} catch {
 		return {};
 	}
 }
@@ -3006,6 +3110,12 @@ function flash(name) {
 *
 * Note: This function is typically not invoked directly by application code.
 * Instead, use a `SessionStorage` object's `getSession` method.
+*
+* @category Utils
+* @param initialData The initial data for the session.
+* @param id The identifier for the session. Defaults to an empty string for a
+* new session.
+* @returns A new {@link Session} object.
 */
 const createSession = (initialData = {}, id = "") => {
 	let map = new Map(Object.entries(initialData));
@@ -3040,9 +3150,15 @@ const createSession = (initialData = {}, id = "") => {
 	};
 };
 /**
-* Returns true if an object is a React Router session.
+* Returns `true` if a value is a React Router {@link Session} object.
 *
-* @see https://reactrouter.com/api/utils/isSession
+* @public
+* @category Utils
+* @mode framework
+* @mode data
+* @param object The value to check.
+* @returns `true` if the value is a React Router {@link Session} object;
+* otherwise, `false`.
 */
 const isSession = (object) => {
 	return object != null && typeof object.id === "string" && typeof object.data !== "undefined" && typeof object.has === "function" && typeof object.get === "function" && typeof object.set === "function" && typeof object.flash === "function" && typeof object.unset === "function";
@@ -3052,6 +3168,11 @@ const isSession = (object) => {
 *
 * Note: This is a low-level API that should only be used if none of the
 * existing session storage options meet your requirements.
+*
+* @category Utils
+* @param strategy The strategy used to store session identifiers and data.
+* @returns A {@link SessionStorage} object that persists session data using the
+* provided strategy.
 */
 function createSessionStorage({ cookie: cookieArg, createData, readData, updateData, deleteData }) {
 	let cookie = isCookie(cookieArg) ? cookieArg : createCookie(cookieArg?.name || "__session", cookieArg);
@@ -3091,6 +3212,14 @@ function warnOnceAboutSigningSessionCookie(cookie) {
 * needed, and can help to simplify some load-balanced scenarios. However, it
 * also has the limitation that serialized session data may not exceed the
 * browser's maximum cookie size. Trade-offs!
+*
+* @public
+* @category Utils
+* @mode framework
+* @mode data
+* @param options Options for creating the cookie-backed session storage.
+* @returns A {@link SessionStorage} object that stores all session data in its
+* cookie.
 */
 function createCookieSessionStorage({ cookie: cookieArg } = {}) {
 	let cookie = isCookie(cookieArg) ? cookieArg : createCookie(cookieArg?.name || "__session", cookieArg);
@@ -3116,18 +3245,24 @@ function createCookieSessionStorage({ cookie: cookieArg } = {}) {
 //#endregion
 //#region lib/server-runtime/sessions/memoryStorage.ts
 /**
-* Creates and returns a simple in-memory SessionStorage object, mostly useful
-* for testing and as a reference implementation.
+* Creates and returns a simple in-memory SessionStorage object.
+*
+* Intended for local development and testing. It does not scale beyond a single
+* process, and all session data is lost when the server process stops/restarts.
 *
-* Note: This storage does not scale beyond a single process, so it is not
-* suitable for most production scenarios.
+* @public
+* @category Utils
+* @mode framework
+* @mode data
+* @param options Options for creating the in-memory session storage.
+* @returns A {@link SessionStorage} object that stores session data in memory.
 */
 function createMemorySessionStorage({ cookie } = {}) {
 	let map = /* @__PURE__ */ new Map();
 	return createSessionStorage({
 		cookie,
 		async createData(data, expires) {
-			let id = Math.random().toString(36).substring(2, 10);
+			let id = crypto.randomUUID();
 			map.set(id, {
 				data,
 				expires

package/dist/production/index.js

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

package/dist/production/lib/actions.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.2.0
+ * react-router v8.3.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -12,14 +12,19 @@
 function throwIfPotentialCSRFAttack(request, allowedActionOrigins) {
 	let originHeader = request.headers.get("origin");
 	let originDomain = null;
+	let originUrl = null;
 	try {
-		originDomain = typeof originHeader === "string" && originHeader !== "null" ? new URL(originHeader).host : originHeader;
+		if (typeof originHeader === "string" && originHeader !== "null") {
+			originUrl = new URL(originHeader);
+			originDomain = originUrl.host;
+		} else originDomain = originHeader;
 	} catch {
 		throw new Error(`\`origin\` header is not a valid URL. Aborting the action.`);
 	}
-	let host = new URL(request.url).host;
-	if (originDomain && originDomain !== host) {
-		if (!isAllowedOrigin(originDomain, allowedActionOrigins)) throw new Error("The `request.url` host does not match `origin` header from a forwarded action request. Aborting the action.");
+	let requestUrl = new URL(request.url);
+	let originMatchesRequest = originUrl ? originUrl.origin === requestUrl.origin : originDomain === requestUrl.host;
+	if (originDomain && !originMatchesRequest) {
+		if (!isAllowedOrigin(originDomain, allowedActionOrigins)) throw new Error("The `request.url` origin does not match `origin` header from a forwarded action request. Aborting the action.");
 	}
 }
 function matchWildcardDomain(domain, pattern) {

package/dist/production/lib/components.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.2.0
+ * react-router v8.3.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,8 +8,9 @@
  *
  * @license MIT
  */
-import { createMemoryHistory, invariant, parsePath, warning } from "./router/history.js";
+import { createMemoryHistory, createPath, invariant, parsePath, warning } from "./router/history.js";
 import { defaultMapRouteProperties, getResolveToMatches, getRoutePattern, resolveTo, stripBasename } from "./router/utils.js";
+import { getNavigatorCurrentUrl, validateNavigationTarget } from "./router/navigation.js";
 import { createRouter } from "./router/router.js";
 import { AwaitContext, DataRouterContext, DataRouterStateContext, FetchersContext, LocationContext, NavigationContext, RouteContext, ViewTransitionContext, useIsRSCRouterContext } from "./context.js";
 import { _renderMatches, useActionData, useAsyncValue, useInRouterContext, useLoaderData, useLocation, useMatches, useNavigate, useOutlet, useParams, useRouteError, useRoutes, useRoutesImpl } from "./hooks.js";
@@ -256,6 +257,7 @@ function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, use
 	let navigator = React$1.useMemo(() => {
 		return {
 			createHref: router.createHref,
+			createURL: router.createURL,
 			encodeLocation: router.encodeLocation,
 			go: (n) => router.navigate(n),
 			push: (to, state, opts) => router.navigate(to, {
@@ -379,12 +381,13 @@ function MemoryRouter({ basename, children, initialEntries, initialIndex, useTra
 */
 function Navigate({ to, replace, state, relative }) {
 	invariant(useInRouterContext(), `<Navigate> may be used only in the context of a <Router> component.`);
-	let { static: isStatic } = React$1.useContext(NavigationContext);
+	let { static: isStatic, navigator } = React$1.useContext(NavigationContext);
 	warning(!isStatic, "<Navigate> must not be used on the initial render in a <StaticRouter>. This is a no-op, but you should modify your code so the <Navigate> is only ever rendered in response to some user interaction or state change.");
 	let { matches } = React$1.useContext(RouteContext);
 	let { pathname: locationPathname } = useLocation();
 	let navigate = useNavigate();
 	let path = resolveTo(to, getResolveToMatches(matches), locationPathname, relative === "path");
+	validateNavigationTarget(typeof to === "string" ? to : createPath(to), navigator.createHref(path), getNavigatorCurrentUrl(navigator), "reject");
 	let jsonPath = JSON.stringify(path);
 	React$1.useEffect(() => {
 		navigate(JSON.parse(jsonPath), {

package/dist/production/lib/context.d.ts

@@ -55,6 +55,7 @@ interface NavigateOptions {
  */
 interface Navigator {
   createHref: History["createHref"];
+  createURL?: History["createURL"];
   encodeLocation?: History["encodeLocation"];
   go: History["go"];
   push(to: To, state?: any, opts?: NavigateOptions): void;

package/dist/production/lib/context.js

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

package/dist/production/lib/dom/dom.d.ts

@@ -6,30 +6,30 @@ import { RelativeRoutingType } from "../router/router.js";
 type ParamKeyValuePair = [string, string];
 type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
 /**
-  Creates a URLSearchParams object using the given initializer.
-
-  This is identical to `new URLSearchParams(init)` except it also
-  supports arrays as values in the object form of the initializer
-  instead of just strings. This is convenient when you need multiple
-  values for a given key, but don't want to use an array initializer.
-
-  For example, instead of:
-
-  ```tsx
-  let searchParams = new URLSearchParams([
-    ['sort', 'name'],
-    ['sort', 'price']
-  ]);
-  ```
-  you can do:
-
-  ```
-  let searchParams = createSearchParams({
-    sort: ['name', 'price']
-  });
-  ```
-
-  @category Utils
+ * Creates a URLSearchParams object using the given initializer.
+ *
+ * This is identical to `new URLSearchParams(init)` except it also supports
+ * arrays as values in the object form of the initializer instead of just
+ * strings. This is convenient when you need multiple values for a given key,
+ * but don't want to use an array initializer.
+ *
+ * @example
+ * // Instead of:
+ * let searchParams = new URLSearchParams([
+ *   ["sort", "name"],
+ *   ["sort", "price"],
+ * ]);
+ *
+ * // You can do:
+ * let searchParams = createSearchParams({
+ *   sort: ["name", "price"],
+ * });
+ *
+ * @public
+ * @category Utils
+ * @param init The value used to initialize the URL search parameters.
+ * @returns A URLSearchParams object containing the initialized search
+ * parameters.
  */
 declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
 type JsonObject = { [Key in string]: JsonValue } & { [Key in string]?: JsonValue | undefined };