fix(react-router): handle parameters with static suffixes in generatePath (#14269)

joseph0926 · web-flow · commit 30f6c1d8142c · 2025-12-19T17:02:03.000-05:00
diff --git a/.changeset/beige-wasps-cover.md b/.changeset/beige-wasps-cover.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix `generatePath` when used with suffixed params (i.e., "/books/:id.json")
diff --git a/packages/react-router/__tests__/generatePath-test.tsx b/packages/react-router/__tests__/generatePath-test.tsx
@@ -191,4 +191,25 @@ describe("generatePath", () => {
 
     consoleWarn.mockRestore();
   });
+
+  describe("with params followed by static text", () => {
+    it("interpolates params with file extensions", () => {
+      expect(generatePath("/books/:id.json", { id: "42" })).toBe(
+        "/books/42.json",
+      );
+      expect(generatePath("/api/:resource.xml", { resource: "users" })).toBe(
+        "/api/users.xml",
+      );
+      expect(generatePath("/:lang.html", { lang: "en" })).toBe("/en.html");
+    });
+
+    it("handles multiple extensions", () => {
+      expect(generatePath("/files/:name.tar.gz", { name: "archive" })).toBe(
+        "/files/archive.tar.gz",
+      );
+      expect(generatePath("/:file.min.js", { file: "app" })).toBe(
+        "/app.min.js",
+      );
+    });
+  });
 });
diff --git a/packages/react-router/__tests__/useParams-test.tsx b/packages/react-router/__tests__/useParams-test.tsx
@@ -1,6 +1,14 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Outlet, Routes, Route, useParams } from "react-router";
+import {
+  MemoryRouter,
+  Outlet,
+  Routes,
+  Route,
+  useParams,
+  useLocation,
+  generatePath,
+} from "react-router";
 
 function ShowParams() {
   return <pre>{JSON.stringify(useParams())}</pre>;
@@ -209,4 +217,72 @@ describe("useParams", () => {
       `);
     });
   });
+
+  test("maintains compatibility with generatePath", () => {
+    let tests = [
+      {
+        path: "/books/42",
+        url: "/books/42",
+        params: {},
+      },
+      {
+        path: "/books/:id",
+        url: "/books/42",
+        params: { id: "42" },
+      },
+      {
+        path: "/books/:id.json",
+        url: "/books/42.json",
+        params: { id: "42" },
+      },
+      {
+        path: "/books/:id/comments",
+        url: "/books/42/comments",
+        params: { id: "42" },
+      },
+      {
+        path: "/books/:id.json/comments",
+        url: "/books/42.json/comments",
+        params: { id: "42" },
+      },
+    ];
+
+    function ShowParamsAndPath({ path }: { path: string }) {
+      return (
+        <>
+          <p>{JSON.stringify(useParams())}</p>
+          <p>{useLocation().pathname}</p>
+          <p>{generatePath(path, useParams())}</p>
+        </>
+      );
+    }
+
+    for (let { path, url, params } of tests) {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={[url]}>
+            <Routes>
+              <Route path={path} element={<ShowParamsAndPath path={path} />} />
+            </Routes>
+          </MemoryRouter>,
+        );
+      });
+
+      // eslint-disable-next-line jest/no-interpolation-in-snapshots
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        [
+          <p>
+            ${JSON.stringify(params)}
+          </p>,
+          <p>
+            ${url}
+          </p>,
+          <p>
+            ${url}
+          </p>,
+        ]
+      `);
+    }
+  });
 });
diff --git a/packages/react-router/lib/router/utils.ts b/packages/react-router/lib/router/utils.ts
@@ -1337,12 +1337,12 @@ export function generatePath<Path extends string>(
         return stringify(params[star]);
       }
 
-      const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
+      const keyMatch = segment.match(/^:([\w-]+)(\??)(.*)/);
       if (keyMatch) {
-        const [, key, optional] = keyMatch;
+        const [, key, optional, suffix] = keyMatch;
         let param = params[key as PathParam<Path>];
         invariant(optional === "?" || param != null, `Missing ":${key}" param`);
-        return encodeURIComponent(stringify(param));
+        return encodeURIComponent(stringify(param)) + suffix;
       }
 
       // Remove any optional markers from optional static segments

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +Fix `generatePath` when used with suffixed params (i.e., "/books/:id.json")
Original file line number	Diff line number	Diff line change
`@@ -1337,12 +1337,12 @@ export function generatePath<Path extends string>(`
`1337`	`1337`	`return stringify(params[star]);`
`1338`	`1338`	`}`
`1339`	`1339`
`1340`		`- const keyMatch = segment.match(/^:([\w-]+)(\??)$/);`
	`1340`	`+ const keyMatch = segment.match(/^:([\w-]+)(\??)(.*)/);`
`1341`	`1341`	`if (keyMatch) {`
`1342`		`- const [, key, optional] = keyMatch;`
	`1342`	`+ const [, key, optional, suffix] = keyMatch;`
`1343`	`1343`	`let param = params[key as PathParam<Path>];`
`1344`	`1344`	invariant(optional === "?" \|\| param != null, `Missing ":${key}" param`);
`1345`		`- return encodeURIComponent(stringify(param));`
	`1345`	`+ return encodeURIComponent(stringify(param)) + suffix;`
`1346`	`1346`	`}`
`1347`	`1347`
`1348`	`1348`	`// Remove any optional markers from optional static segments`