Update href() with new implementation

Author: ngbrown

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

@@ -9,16 +9,26 @@ 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", () => {
@@ -29,5 +39,5 @@ describe("href", () => {
 
   it("works with periods", () => {
     expect(href("/a/:b.zip", { b: "hello" })).toBe("/a/hello.zip");
-  })
+  });
 });

packages/react-router/lib/href.ts

@@ -27,26 +27,27 @@ 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;
-      }
-
-      const match = segment.match(/^:([\w-]+)(\?)?/);
-      if (!match) return segment;
-      const param = match[1];
+  let result = path.replace(
+    /\/:([\w-]+)(\?)?/g, // same regex as in .\router\utils.ts: compilePath().
+    (_: string, param: string, isOptional) => {
       const value = params ? params[param] : undefined;
-
-      const isRequired = match[2] === undefined;
-      if (isRequired && value === undefined) {
-        throw Error(
+      if (isOptional == null && value == null) {
+        throw new Error(
           `Path '${path}' requires param '${param}' but it was not provided`
         );
       }
-      return value;
-    })
-    .filter((segment) => segment !== undefined)
-    .join("/");
+      return value == null ? "" : "/" + value;
+    }
+  );
+
+  if (result.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.
+    result = result.slice(0, result.endsWith("/*") ? -2 : -1);
+    if (params && params["*"]) {
+      result += "/" + params["*"];
+    }
+  }
+
+  return result || "/";
 }