Fix(react-router): Correct href() to processes routes that have an extension after the parameter or are a single optional parameter (#13797)

* Add href() test for period in page url

* Update href() with new implementation

* Add changeset

* In href(), remove need for slice and ignore trailing slashes from input

* refactor

---------

Co-authored-by: Pedro Cattori <[email protected]>

Author: ngbrown

.changeset/slow-readers-thank.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+`href()` now correctly processes routes that have an extension after the parameter or are a single optional parameter.

packages/react-router/__tests__/href-test.ts

@@ -9,21 +9,35 @@ describe("href", () => {
     expect(href("/a/:b", { b: "hello", z: "ignored" })).toBe("/a/hello");
     expect(href("/a/:b?", { b: "hello", z: "ignored" })).toBe("/a/hello");
     expect(href("/a/:b?")).toBe("/a");
+    expect(href("/:b?")).toBe("/");
+    expect(href("/a/:e-z", { "e-z": "hello" })).toBe("/a/hello");
   });
 
   it("works with repeated params", () => {
     expect(href("/a/:b?/:b/:b?/:b", { b: "hello" })).toBe(
       "/a/hello/hello/hello/hello",
     );
+    expect(href("/a/:c?/:b/:c?/:b", { b: "hello" })).toBe("/a/hello/hello");
   });
 
   it("works with splats", () => {
     expect(href("/a/*", { "*": "b/c" })).toBe("/a/b/c");
+    expect(href("/a/*", {})).toBe("/a");
+  });
+
+  it("works with malformed splats", () => {
+    // this is how packages\react-router\lib\router\utils.ts: compilePath() will handle these routes.
+    expect(href("/a/z*", { "*": "b/c" })).toBe("/a/z/b/c");
+    expect(href("/a/z*", {})).toBe("/a/z");
   });
 
   it("throws when required params are missing", () => {
     expect(() => href("/a/:b")).toThrow(
       `Path '/a/:b' requires param 'b' but it was not provided`,
     );
   });
+
+  it("works with periods", () => {
+    expect(href("/a/:b.zip", { b: "hello" })).toBe("/a/hello.zip");
+  });
 });

packages/react-router/lib/href.ts

@@ -27,26 +27,30 @@ export function href<Path extends keyof Args>(
   ...args: Args[Path]
 ): string {
   let params = args[0];
-  return path
-    .split("/")
-    .map((segment) => {
-      if (segment === "*") {
-        return params ? params["*"] : undefined;
-      }
+  let result = path
+    .replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
+    .replace(
+      /\/:([\w-]+)(\?)?/g, // same regex as in .\router\utils.ts: compilePath().
+      (_: string, param: string, questionMark: string | undefined) => {
+        const isRequired = questionMark === undefined;
+        const value = params ? params[param] : undefined;
+        if (isRequired && value === undefined) {
+          throw new Error(
+            `Path '${path}' requires param '${param}' but it was not provided`,
+          );
+        }
+        return value === undefined ? "" : "/" + value;
+      },
+    );
 
-      const match = segment.match(/^:([\w-]+)(\?)?/);
-      if (!match) return segment;
-      const param = match[1];
-      const value = params ? params[param] : undefined;
+  if (path.endsWith("*")) {
+    // treat trailing splat the same way as compilePath, and force it to be as if it were `/*`.
+    // `react-router typegen` will not generate the params for a malformed splat, causing a type error, but we can still do the correct thing here.
+    const value = params ? params["*"] : undefined;
+    if (value !== undefined) {
+      result += "/" + value;
+    }
+  }
 
-      const isRequired = match[2] === undefined;
-      if (isRequired && value === undefined) {
-        throw Error(
-          `Path '${path}' requires param '${param}' but it was not provided`,
-        );
-      }
-      return value;
-    })
-    .filter((segment) => segment !== undefined)
-    .join("/");
+  return result || "/";
 }