diff --git a/contributors.yml b/contributors.yml index 7e9d8a5445..e6ef407ff2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -47,6 +47,7 @@ - shamsup - shihanng - shivamsinghchahar +- theostavrides - thisiskartik - ThornWu - timdorr diff --git a/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx b/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx index b06252f76a..5dbe7a545f 100644 --- a/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx +++ b/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx @@ -184,6 +184,32 @@ describe("Descendant splat matching", () => { `); }); + it("allows `@` to appear at the beginning", () => { + let renderer = renderNestedSplatRoute([ + "/courses/react/@react-fundamentals", + ]); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+

+ Courses +

+
+

+ React +

+
+

+ React Fundamentals +

+

+ The params are + {"*":"@react-fundamentals","splat":"@react-fundamentals"} +

+
+
+
+ `); + }); it("allows url-encoded entities to appear at the beginning", () => { let renderer = renderNestedSplatRoute([ "/courses/react/%20react-fundamentals", diff --git a/packages/react-router/__tests__/layout-routes-test.tsx b/packages/react-router/__tests__/layout-routes-test.tsx index 0884451520..666f92cba8 100644 --- a/packages/react-router/__tests__/layout-routes-test.tsx +++ b/packages/react-router/__tests__/layout-routes-test.tsx @@ -31,6 +31,48 @@ describe("A layout route", () => { `); }); + + it("allows routes starting with `@`", () => { + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + +

Layout

+ + + } + > + +

Splat

+ + } + /> +
+
+
+ ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+

+ Layout +

+
+

+ Splat +

+
+
+ `); + }); describe("matches when a nested splat route begins with a special character", () => { it("allows routes starting with `-`", () => { let renderer: TestRenderer.ReactTestRenderer; diff --git a/packages/react-router/lib/router.ts b/packages/react-router/lib/router.ts index f8d87eefd2..a0c668d467 100644 --- a/packages/react-router/lib/router.ts +++ b/packages/react-router/lib/router.ts @@ -477,7 +477,7 @@ function compilePath( // Additionally, allow paths starting with `.`, `-`, `~`, and url-encoded entities, // but do not consume the character in the matched path so they can match against // nested paths. - "(?:(?=[.~-]|%[0-9A-F]{2})|\\b|\\/|$)"; + "(?:(?=[@.~-]|%[0-9A-F]{2})|\\b|\\/|$)"; } let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");