diff --git a/.changeset/unlucky-pigs-chew.md b/.changeset/unlucky-pigs-chew.md new file mode 100644 index 0000000000..847f979540 --- /dev/null +++ b/.changeset/unlucky-pigs-chew.md @@ -0,0 +1,10 @@ +--- +"react-router": patch +--- + +href replaces splats `*` + +```ts +const a = href("/products/*", { "*": "/1/edit" }); +// -> /products/1/edit +``` diff --git a/packages/react-router/__tests__/href-test.ts b/packages/react-router/__tests__/href-test.ts index e4deef7846..42043626d9 100644 --- a/packages/react-router/__tests__/href-test.ts +++ b/packages/react-router/__tests__/href-test.ts @@ -17,6 +17,10 @@ describe("href", () => { ); }); + it("works with splats", () => { + expect(href("/a/*", { "*": "b/c" })).toBe("/a/b/c"); + }); + it("throws when required params are missing", () => { expect(() => href("/a/:b")).toThrow( `Path '/a/:b' requires param 'b' but it was not provided` diff --git a/packages/react-router/lib/href.ts b/packages/react-router/lib/href.ts index 048b9c7890..10e81590f1 100644 --- a/packages/react-router/lib/href.ts +++ b/packages/react-router/lib/href.ts @@ -43,6 +43,10 @@ export function href( return path .split("/") .map((segment) => { + if (segment === "*") { + return params ? params["*"] : undefined; + } + const match = segment.match(/^:([\w-]+)(\?)?/); if (!match) return segment; const param = match[1];