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

contributors.yml

@@ -133,6 +133,7 @@
 - jmargeta
 - johnpangalos
 - jonkoops
+- joseph0926
 - jrakotoharisoa
 - juanpprieto
 - jungwoo3490

packages/react-router/__tests__/generatePath-test.tsx

@@ -185,4 +185,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"
+      );
+    });
+  });
 });

packages/router/utils.ts

@@ -903,12 +903,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 stringify(param);
+        return stringify(param) + suffix;
       }
 
       // Remove any optional markers from optional static segments