Fix useMatch undecoded params (#11789)

.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

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", () => {

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]
  );
 }

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";
 

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("/")