fix: generating path when passed only slash and star (#9174)

* [#8883] Add tests for generate path func executing with slash and splat

* [#8883] Fix generating path when only slash + star passed

* Signed CLA by adding KostiantynPopovych to contributors.yml

* [#8883] Increase allowed boundle size

* Update approach

Co-authored-by: Matt Brophy <matt@brophy.org>

Author: Kostiantyn Popovych

contributors.yml

@@ -81,4 +81,5 @@
 - fz6m
 - TkDodo
 - infoxicator
+- KostiantynPopovych
 - CanRau

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

@@ -17,7 +17,7 @@ describe("generatePath", () => {
         "/courses/routing/grades"
       );
       expect(generatePath("*", { "*": "routing/grades" })).toBe(
-        "/routing/grades"
+        "routing/grades"
       );
     });
   });
@@ -42,4 +42,31 @@ describe("generatePath", () => {
       expect(generatePath("/courses/*", {})).toBe("/courses");
     });
   });
+
+  it("throws only on on missing named parameters, but not missing splat params", () => {
+    expect(() => generatePath(":foo")).toThrow();
+    expect(() => generatePath("/:foo")).toThrow();
+    expect(() => generatePath("*")).not.toThrow();
+    expect(() => generatePath("/*")).not.toThrow();
+  });
+
+  it("only interpolates and does not add slashes", () => {
+    expect(generatePath("*")).toBe("");
+    expect(generatePath("/*")).toBe("/");
+
+    expect(generatePath("foo*")).toBe("foo");
+    expect(generatePath("/foo*")).toBe("/foo");
+
+    expect(generatePath(":foo", { foo: "bar" })).toBe("bar");
+    expect(generatePath("/:foo", { foo: "bar" })).toBe("/bar");
+
+    expect(generatePath("*", { "*": "bar" })).toBe("bar");
+    expect(generatePath("/*", { "*": "bar" })).toBe("/bar");
+
+    expect(generatePath("foo:bar", { bar: "baz" })).toBe("foobaz");
+    expect(generatePath("/foo:bar", { bar: "baz" })).toBe("/foobaz");
+
+    expect(generatePath("foo*", { "*": "bar" })).toBe("foobar");
+    expect(generatePath("/foo*", { "*": "bar" })).toBe("/foobar");
+  });
 });

packages/router/utils.ts

@@ -485,10 +485,17 @@ export function generatePath<Path extends string>(
       invariant(params[key] != null, `Missing ":${key}" param`);
       return params[key]!;
     })
-    .replace(/\/*\*$/, (_) => {
+    .replace(/(\/?)\*/, (_, prefix, __, str) => {
       const star = "*" as PathParam<Path>;
 
-      return params[star] == null ? "" : params[star].replace(/^\/*/, "/");
+      if (params[star] == null) {
+        // If no splat was provided, trim the trailing slash _unless_ it's
+        // the entire path
+        return str === "/*" ? "/" : "";
+      }
+
+      // Apply the splat
+      return `${prefix}${params[star]}`;
     });
 }