Fix useMatch undecoded params (#11789)

remix-run · Jul 10, 2024 · da65120 · da65120
1 parent 03d6cf2
commit da65120
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 2 deletions.
diff --git a/.changeset/big-trainers-cough.md b/.changeset/big-trainers-cough.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix regression and properly decode paths inside `useMatch` so matches/params reflect decoded params
diff --git a/packages/react-router-dom/__tests__/special-characters-test.tsx b/packages/react-router-dom/__tests__/special-characters-test.tsx
@@ -15,6 +15,7 @@ import {
   HashRouter,
   MemoryRouter,
   Link,
+  Outlet,
   Routes,
   Route,
   RouterProvider,
@@ -23,6 +24,7 @@ import {
   createMemoryRouter,
   createRoutesFromElements,
   useLocation,
+  useMatch,
   useNavigate,
   useParams,
 } from "react-router-dom";
@@ -962,6 +964,51 @@ describe("special character tests", () => {
           `"<pre>{"pathname":"/with%20space","search":"","hash":""}</pre>"`
         );
       });
+
+      it("properly decodes params in useMatch", () => {
+        let testWindow = getWindow("/user/bücherwurm");
+
+        let router = createBrowserRouter(
+          [
+            {
+              path: "/",
+              Component() {
+                let match = useMatch("/user/:username");
+                return (
+                  <>
+                    <pre>{JSON.stringify(match, null, 2)}</pre>
+                    <Outlet />
+                  </>
+                );
+              },
+              children: [
+                {
+                  path: "user/:username",
+                  element: null,
+                },
+              ],
+            },
+          ],
+          { window: testWindow }
+        );
+        let ctx = render(<RouterProvider router={router} />);
+
+        expect(testWindow.location.pathname).toBe("/user/b%C3%BCcherwurm");
+        expect(ctx.container.innerHTML).toMatchInlineSnapshot(`
+          "<pre>{
+            "params": {
+              "username": "bücherwurm"
+            },
+            "pathname": "/user/bücherwurm",
+            "pathnameBase": "/user/bücherwurm",
+            "pattern": {
+              "path": "/user/:username",
+              "caseSensitive": false,
+              "end": true
+            }
+          }</pre>"
+        `);
+      });
     });
 
     describe("hash routers", () => {

diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
@@ -18,6 +18,7 @@ import {
   IDLE_BLOCKER,
   Action as NavigationType,
   UNSAFE_convertRouteMatchToUiMatch as convertRouteMatchToUiMatch,
+  UNSAFE_decodePath as decodePath,
   UNSAFE_getResolveToMatches as getResolveToMatches,
   UNSAFE_invariant as invariant,
   isRouteErrorResponse,
@@ -141,7 +142,7 @@ export function useMatch<
 
   let { pathname } = useLocation();
   return React.useMemo(
-    () => matchPath<ParamKey, Path>(pattern, pathname),
+    () => matchPath<ParamKey, Path>(pattern, decodePath(pathname)),
     [pathname, pattern]
   );
 }

diff --git a/packages/router/index.ts b/packages/router/index.ts
@@ -92,6 +92,7 @@ export {
   ErrorResponseImpl as UNSAFE_ErrorResponseImpl,
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
   convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch,
+  decodePath as UNSAFE_decodePath,
   getResolveToMatches as UNSAFE_getResolveToMatches,
 } from "./utils";
 

diff --git a/packages/router/utils.ts b/packages/router/utils.ts
@@ -1075,7 +1075,7 @@ function compilePath(
   return [matcher, params];
 }
 
-function decodePath(value: string) {
+export function decodePath(value: string) {
   try {
     return value
       .split("/")