+
+ );
+ }
+ });
});
describe("when matching as part of the defined route path", () => {
@@ -697,12 +750,12 @@ describe("special character tests", () => {
it("handles special chars in root route paths", async () => {
for (let charDef of specialChars) {
- let { char, pathChar } = charDef;
+ let { char, pathChar, decodedChar } = charDef;
// Skip * which is just a splat route
if (char === "*") {
continue;
}
- await assertRouteMatch(char, `/${char}`, "Matched Root", {
+ await assertRouteMatch(decodedChar, `/${char}`, "Matched Root", {
pathname: `/${pathChar}`,
search: "",
hash: "",
@@ -712,13 +765,13 @@ describe("special character tests", () => {
it("handles special chars in static nested route paths", async () => {
for (let charDef of specialChars) {
- let { char, pathChar } = charDef;
+ let { char, pathChar, decodedChar } = charDef;
// Skip * which is just a splat route
if (char === "*") {
continue;
}
await assertRouteMatch(
- char,
+ decodedChar,
`/nested/${char}`,
"Matched Static Nested",
{
@@ -732,13 +785,13 @@ describe("special character tests", () => {
it("handles special chars in nested param route paths", async () => {
for (let charDef of specialChars) {
- let { char, pathChar } = charDef;
+ let { char, pathChar, decodedChar } = charDef;
// Skip * which is just a splat route
if (char === "*") {
continue;
}
await assertRouteMatch(
- char,
+ decodedChar,
`/foo/${char}`,
"Matched Param Nested",
{
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
index 6b75be9ed9..0e07d98d35 100644
--- a/packages/react-router-dom/server.tsx
+++ b/packages/react-router-dom/server.tsx
@@ -389,6 +389,10 @@ function createHref(to: To) {
function encodeLocation(to: To): Path {
let href = typeof to === "string" ? to : createPath(to);
+ // Treating this as a full URL will strip any trailing spaces so we need to
+ // pre-encode them since they might be part of a matching splat param from
+ // an ancestor route
+ href = href.replace(/ $/, "%20");
let encoded = ABSOLUTE_URL_REGEX.test(href)
? new URL(href)
: new URL(href, "http://localhost");
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
index 5d705553e7..0feda4720f 100644
--- a/packages/react-router/lib/hooks.tsx
+++ b/packages/react-router/lib/hooks.tsx
@@ -422,10 +422,27 @@ export function useRoutesImpl(
}
let pathname = location.pathname || "/";
- let remainingPathname =
- parentPathnameBase === "/"
- ? pathname
- : pathname.slice(parentPathnameBase.length) || "/";
+
+ let remainingPathname = pathname;
+ if (parentPathnameBase !== "/") {
+ // Determine the remaining pathname by removing the # of URL segments the
+ // parentPathnameBase has, instead of removing based on character count.
+ // This is because we can't guarantee that incoming/outgoing encodings/
+ // decodings will match exactly.
+ // We decode paths before matching on a per-segment basis with
+ // decodeURIComponent(), but we re-encode pathnames via `new URL()` so they
+ // match what `window.location.pathname` would reflect. Those don't 100%
+ // align when it comes to encoded URI characters such as % and &.
+ //
+ // So we may end up with:
+ // pathname: "/descendant/a%25b/match"
+ // parentPathnameBase: "/descendant/a%b"
+ //
+ // And the direct substring removal approach won't work :/
+ let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
+ let segments = pathname.replace(/^\//, "").split("/");
+ remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
+ }
let matches = matchRoutes(routes, { pathname: remainingPathname });
diff --git a/packages/router/history.ts b/packages/router/history.ts
index ad4bd44b09..335645db1c 100644
--- a/packages/router/history.ts
+++ b/packages/router/history.ts
@@ -690,6 +690,10 @@ function getUrlBasedHistory(
: window.location.href;
let href = typeof to === "string" ? to : createPath(to);
+ // Treating this as a full URL will strip any trailing spaces so we need to
+ // pre-encode them since they might be part of a matching splat param from
+ // an ancestor route
+ href = href.replace(/ $/, "%20");
invariant(
base,
`No window.location.(origin|href) available to create URL for href: ${href}`
diff --git a/packages/router/utils.ts b/packages/router/utils.ts
index c845d0285f..4bb9f48e1d 100644
--- a/packages/router/utils.ts
+++ b/packages/router/utils.ts
@@ -485,16 +485,14 @@ export function matchRoutes<
let matches = null;
for (let i = 0; matches == null && i < branches.length; ++i) {
- matches = matchRouteBranch(
- branches[i],
- // Incoming pathnames are generally encoded from either window.location
- // or from router.navigate, but we want to match against the unencoded
- // paths in the route definitions. Memory router locations won't be
- // encoded here but there also shouldn't be anything to decode so this
- // should be a safe operation. This avoids needing matchRoutes to be
- // history-aware.
- safelyDecodeURI(pathname)
- );
+ // Incoming pathnames are generally encoded from either window.location
+ // or from router.navigate, but we want to match against the unencoded
+ // paths in the route definitions. Memory router locations won't be
+ // encoded here but there also shouldn't be anything to decode so this
+ // should be a safe operation. This avoids needing matchRoutes to be
+ // history-aware.
+ let decoded = decodePath(pathname);
+ matches = matchRouteBranch(branches[i], decoded);
}
return matches;
@@ -930,7 +928,7 @@ export function matchPath<
if (isOptional && !value) {
memo[paramName] = undefined;
} else {
- memo[paramName] = safelyDecodeURIComponent(value || "", paramName);
+ memo[paramName] = (value || "").replace(/%2F/g, "/");
}
return memo;
},
@@ -1002,9 +1000,12 @@ function compilePath(
return [matcher, params];
}
-function safelyDecodeURI(value: string) {
+function decodePath(value: string) {
try {
- return decodeURI(value);
+ return value
+ .split("/")
+ .map((v) => decodeURIComponent(v).replace(/\//g, "%2F"))
+ .join("/");
} catch (error) {
warning(
false,
@@ -1017,21 +1018,6 @@ function safelyDecodeURI(value: string) {
}
}
-function safelyDecodeURIComponent(value: string, paramName: string) {
- try {
- return decodeURIComponent(value);
- } catch (error) {
- warning(
- false,
- `The value for the URL param "${paramName}" will not be decoded because` +
- ` the string "${value}" is a malformed URL segment. This is probably` +
- ` due to a bad percent encoding (${error}).`
- );
-
- return value;
- }
-}
-
/**
* @private
*/