Fix: cant start route with @ within Layout Routes (#8699)

contributors.yml

@@ -39,6 +39,7 @@
 - shamsup
 - shihanng
 - shivamsinghchahar
+- theostavrides
 - thisiskartik
 - timdorr
 - turansky

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",

packages/react-router/__tests__/layout-routes-test.tsx

@@ -32,6 +32,47 @@ describe("A layout route", () => {
     `);
   });
   describe("matches when a nested splat route begins with a special character", () => {
+    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>
+      `);
+    });
     it("allows routes starting with `-`", () => {
       let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {

packages/react-router/index.tsx

@@ -1232,7 +1232,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");