fix: handle parameters with static suffixes in generatePath

Author: joseph0926

contributors.yml

@@ -187,6 +187,7 @@
 - jmjpro
 - johnpangalos
 - jonkoops
+- joseph0926
 - jrakotoharisoa
 - jrestall
 - juanpprieto

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

packages/react-router/lib/router/utils.ts

@@ -1301,12 +1301,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