react-router 8.1.0 → 8.3.0

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -110,6 +110,29 @@ function getManifestPath(_manifestPath, basename) {
 	return basename == null ? manifestPath : joinPaths([basename, manifestPath]);
 }
 const MANIFEST_VERSION_STORAGE_KEY = "react-router-manifest-version";
+async function handleClientVersionMismatch(needsReload, version, errorReloadPath) {
+	if (!needsReload) {
+		try {
+			sessionStorage.removeItem(MANIFEST_VERSION_STORAGE_KEY);
+		} catch {}
+		return false;
+	}
+	if (!errorReloadPath) {
+		console.warn("Detected a manifest version mismatch during eager route discovery. The next navigation/fetch to an undiscovered route will result in a new document navigation to sync up with the latest manifest.");
+		return true;
+	}
+	try {
+		if (sessionStorage.getItem(MANIFEST_VERSION_STORAGE_KEY) === version) {
+			console.error("Unable to discover routes due to manifest version mismatch.");
+			return true;
+		}
+		sessionStorage.setItem(MANIFEST_VERSION_STORAGE_KEY, version);
+	} catch {}
+	window.location.href = errorReloadPath;
+	console.warn("Detected manifest version mismatch, reloading...");
+	await new Promise(() => {});
+	return true;
+}
 async function fetchAndApplyManifestPatches(paths, errorReloadPath, manifest, routeModules, ssr, isSpaMode, basename, manifestPath, patchRoutes, signal) {
 	paths = getPathsWithAncestors(paths);
 	const searchParams = new URLSearchParams();
@@ -125,25 +148,7 @@ async function fetchAndApplyManifestPatches(paths, errorReloadPath, manifest, ro
 	try {
 		let res = await fetch(url, { signal });
 		if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
-		else if (res.status === 204 && res.headers.has("X-Remix-Reload-Document")) {
-			if (!errorReloadPath) {
-				console.warn("Detected a manifest version mismatch during eager route discovery. The next navigation/fetch to an undiscovered route will result in a new document navigation to sync up with the latest manifest.");
-				return;
-			}
-			try {
-				if (sessionStorage.getItem(MANIFEST_VERSION_STORAGE_KEY) === manifest.version) {
-					console.error("Unable to discover routes due to manifest version mismatch.");
-					return;
-				}
-				sessionStorage.setItem(MANIFEST_VERSION_STORAGE_KEY, manifest.version);
-			} catch {}
-			window.location.href = errorReloadPath;
-			console.warn("Detected manifest version mismatch, reloading...");
-			await new Promise(() => {});
-		} else if (res.status >= 400) throw new Error(await res.text());
-		try {
-			sessionStorage.removeItem(MANIFEST_VERSION_STORAGE_KEY);
-		} catch {}
+		if (await handleClientVersionMismatch(res.status === 204 && res.headers.has("X-Remix-Reload-Document"), manifest.version, errorReloadPath)) return;
 		serverPatches = await res.json();
 	} catch (e) {
 		if (signal?.aborted) return;
@@ -177,4 +182,4 @@ function debounce(callback, wait) {
 	};
 }
 //#endregion
-export { URL_LIMIT, getManifestPath, getPartialManifest, getPatchRoutesOnNavigationFunction, getPathsWithAncestors, isFogOfWarEnabled, useFogOFWarDiscovery };
+export { URL_LIMIT, getManifestPath, getPartialManifest, getPatchRoutesOnNavigationFunction, getPathsWithAncestors, handleClientVersionMismatch, isFogOfWarEnabled, useFogOFWarDiscovery };

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.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.3.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.3.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.3.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.3.0
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -50,7 +50,20 @@ interface RoutesTestStubProps {
   future?: Partial<FutureConfig>;
 }
 /**
+ * Creates a React component that renders the provided routes in a test-friendly
+ * React Router context.
+ *
+ * Use this to unit test components that rely on router context, such as
+ * `loaderData`, `actionData`, and route matches.
+ *
+ * @public
  * @category Utils
+ * @mode framework
+ * @mode data
+ * @param routes The route objects to render in the test router.
+ * @param _context An optional {@link RouterContextProvider} for supplying
+ * application context values to route middleware, loaders, and actions.
+ * @returns A React component that renders the test router.
  */
 declare function createRoutesStub(routes: StubRouteObject[], _context?: RouterContextProvider): ({
   initialEntries,

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,7 +14,20 @@ import { FrameworkContext } from "./components.js";
 import * as React$1 from "react";
 //#region lib/dom/ssr/routes-test-stub.tsx
 /**
+* Creates a React component that renders the provided routes in a test-friendly
+* React Router context.
+*
+* Use this to unit test components that rely on router context, such as
+* `loaderData`, `actionData`, and route matches.
+*
+* @public
 * @category Utils
+* @mode framework
+* @mode data
+* @param routes The route objects to render in the test router.
+* @param _context An optional {@link RouterContextProvider} for supplying
+* application context values to route middleware, loaders, and actions.
+* @returns A React component that renders the test router.
 */
 function createRoutesStub(routes, _context) {
 	return function RoutesTestStub({ initialEntries, initialIndex, hydrationData, future }) {

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.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.3.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.3.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.3.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.3.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/development/lib/errors.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.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.3.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.d.ts

@@ -6,14 +6,30 @@ import { Pages } from "./types/register.js";
 type Args = { [K in keyof Pages]: ToArgs<Pages[K]["params"]> };
 type ToArgs<Params extends Record<string, string | undefined>> = Equal<Params, {}> extends true ? [] : Partial<Params> extends Params ? [Params] | [] : [Params];
 /**
-  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
  */
 declare function href<Path extends keyof Args>(path: Path, ...args: Args[Path]): string;
 //#endregion

package/dist/development/lib/href.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,16 +8,36 @@
  *
  * @license MIT
  */
+import { encodePathParam } from "./router/utils.js";
 //#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.
-
-```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];
@@ -25,11 +45,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 ? "" : "/" + encodePathParam(stringify(value));
 	});
 	if (path.endsWith("*")) {
 		const value = params?.["*"];
-		if (value !== void 0) result += "/" + value;
+		if (value !== void 0) result += "/" + stringify(value).split("/").map(encodePathParam).join("/");
 	}
 	return result || "/";
 }

package/dist/development/lib/router/history.d.ts

@@ -236,7 +236,10 @@ declare function invariant<T>(value: T | null | undefined, message?: string): as
 /**
  * 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.
  */
 declare function createPath({
   pathname,
@@ -246,7 +249,10 @@ declare function createPath({
 /**
  * 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.
  */
 declare function parsePath(path: string): Partial<Path>;
 interface UrlHistory extends History {}

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -231,7 +231,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;
@@ -241,7 +244,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 = {};

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.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.3.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.3.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/development/lib/router/utils.d.ts

@@ -686,10 +686,22 @@ interface RouteBranch<RouteObjectType extends RouteObject = RouteObject> {
 /**
  * Returns a path with params interpolated.
  *
+ * 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
  * import { generatePath } from "react-router";
  *
  * generatePath("/users/:id", { id: "123" }); // "/users/123"
+ * generatePath("/files/:name", { name: "a b" }); // "/files/a%20b"
+ * generatePath("/releases/:v", { v: "1.0.0+1" }); // "/releases/1.0.0+1"
  *
  * @public
  * @category Utils

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.1.0
+ * react-router v8.3.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;
@@ -373,12 +375,66 @@ 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]);
+}
+/**
 * Returns a path with params interpolated.
 *
+* 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
 * import { generatePath } from "react-router";
 *
 * generatePath("/users/:id", { id: "123" }); // "/users/123"
+* generatePath("/files/:name", { name: "a b" }); // "/files/a%20b"
+* generatePath("/releases/:v", { v: "1.0.0+1" }); // "/releases/1.0.0+1"
 *
 * @public
 * @category Utils
@@ -401,7 +457,7 @@ function generatePath(originalPath, params = {}) {
 			const [, key, optional, suffix] = keyMatch;
 			let param = params[key];
 			invariant(optional === "?" || param != null, `Missing ":${key}" param`);
-			return encodeURIComponent(stringify(param)) + suffix;
+			return encodePathParam(stringify(param)) + suffix;
 		}
 		return segment.replace(/\?$/g, "");
 	}).filter((segment) => !!segment).join("/");
@@ -465,7 +521,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 === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
@@ -822,4 +878,4 @@ function parseToInfo(_to, basename) {
 	};
 }
 //#endregion
-export { ErrorResponseImpl, RouterContextProvider, SUPPORTED_ERROR_TYPES, compilePath, convertRouteMatchToUiMatch, convertRoutesToDataRoutes, createContext, createDataFunctionUrl, data, decodePath, defaultMapRouteProperties, flattenAndRankRoutes, generatePath, getPathContributingMatches, getResolveToMatches, getRoutePattern, isAbsoluteUrl, isBrowser, isRouteErrorResponse, isUnsupportedLazyRouteFunctionKey, isUnsupportedLazyRouteObjectKey, joinPaths, matchPath, matchRoutes, matchRoutesImpl, parseToInfo, prependBasename, redirect, redirectDocument, removeDoubleSlashes, removeTrailingSlash, replace, resolvePath, resolveTo, stripBasename };
+export { ErrorResponseImpl, RouterContextProvider, SUPPORTED_ERROR_TYPES, compilePath, convertRouteMatchToUiMatch, convertRoutesToDataRoutes, createContext, createDataFunctionUrl, data, decodePath, defaultMapRouteProperties, encodePathParam, flattenAndRankRoutes, generatePath, getPathContributingMatches, getResolveToMatches, getRoutePattern, isAbsoluteUrl, isBrowser, isRouteErrorResponse, isUnsupportedLazyRouteFunctionKey, isUnsupportedLazyRouteObjectKey, joinPaths, matchPath, matchRoutes, matchRoutesImpl, parseToInfo, prependBasename, redirect, redirectDocument, removeDoubleSlashes, removeTrailingSlash, replace, resolvePath, resolveTo, stripBasename };