react-router 6.22.0-pre.0 → 6.22.1-pre.0

package/CHANGELOG.md

@@ -1,11 +1,19 @@
 # `react-router`
 
-## 6.22.0-pre.0
+## 6.22.1-pre.0
 
 ### Patch Changes
 
+- Fix encoding/decoding issues with pre-encoded dynamic parameter values ([#11199](https://github.com/remix-run/react-router/pull/11199))
 - Updated dependencies:
-  - `@remix-run/router@1.15.0-pre.0`
+  - `@remix-run/router@1.15.1-pre.0`
+
+## 6.22.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `@remix-run/router@1.15.0`
 
 ## 6.21.3
 

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.22.0-pre.0
+ * React Router v6.22.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -372,7 +372,26 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
     location = locationFromContext;
   }
   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
   });