fix: Allow routes starting with @ in layout routes (#8877)

remix-run · May 18, 2022 · 08b7523 · 08b7523
1 parent b82809f
commit 08b7523
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 1 deletion.
diff --git 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
@@ -184,6 +184,32 @@ describe("Descendant <Routes> splat matching", () => {
           </div>
         `);
       });
+      it("allows `@` to appear at the beginning", () => {
+        let renderer = renderNestedSplatRoute([
+          "/courses/react/@react-fundamentals",
+        ]);
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <div>
+            <h1>
+              Courses
+            </h1>
+            <div>
+              <h1>
+                React
+              </h1>
+              <div>
+                <h1>
+                  React Fundamentals
+                </h1>
+                <p>
+                  The params are 
+                  {"*":"@react-fundamentals","splat":"@react-fundamentals"}
+                </p>
+              </div>
+            </div>
+          </div>
+        `);
+      });
       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
@@ -31,6 +31,48 @@ describe("A layout route", () => {
       </h1>
     `);
   });
+
+  it("allows routes starting with `@`", () => {
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/@splat"]}>
+          <Routes>
+            <Route
+              element={
+                <div>
+                  <h1>Layout</h1>
+                  <Outlet />
+                </div>
+              }
+            >
+              <Route
+                path="*"
+                element={
+                  <div>
+                    <h1>Splat</h1>
+                  </div>
+                }
+              />
+            </Route>
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          Layout
+        </h1>
+        <div>
+          <h1>
+            Splat
+          </h1>
+        </div>
+      </div>
+    `);
+  });
   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
@@ -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");