Fix route ID generation when using Fragments in createRoutesFromEleme…

…nts (#10193)
remix-run · Mar 15, 2023 · af4b07d · af4b07d
1 parent 6c68e1e
commit af4b07d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git a/.changeset/fix-fragments-ids.md b/.changeset/fix-fragments-ids.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix route ID generation when using Fragments in `createRouteFromElements`
diff --git a/packages/react-router/__tests__/createRoutesFromChildren-test.tsx b/packages/react-router/__tests__/createRoutesFromChildren-test.tsx
@@ -240,4 +240,58 @@ describe("creating routes from JSX", () => {
       );
     }).toThrow("An index route cannot have child routes.");
   });
+
+  it("supports react fragments for automatic ID generation", () => {
+    expect(
+      createRoutesFromChildren(
+        <Route path="/">
+          <Route index />
+          <>
+            <Route path="a">
+              <>
+                <Route path="1" />
+                <Route path="2" />
+              </>
+            </Route>
+            <Route path="b" />
+          </>
+        </Route>
+      )
+    ).toEqual([
+      {
+        id: "0",
+        path: "/",
+        hasErrorBoundary: false,
+        children: [
+          {
+            id: "0-0",
+            index: true,
+            hasErrorBoundary: false,
+          },
+          {
+            id: "0-1-0",
+            path: "a",
+            hasErrorBoundary: false,
+            children: [
+              {
+                id: "0-1-0-0-0",
+                path: "1",
+                hasErrorBoundary: false,
+              },
+              {
+                id: "0-1-0-0-1",
+                path: "2",
+                hasErrorBoundary: false,
+              },
+            ],
+          },
+          {
+            id: "0-1-1",
+            path: "b",
+            hasErrorBoundary: false,
+          },
+        ],
+      },
+    ]);
+  });
 });
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
@@ -570,11 +570,13 @@ export function createRoutesFromChildren(
       return;
     }
 
+    let treePath = [...parentPath, index];
+
     if (element.type === React.Fragment) {
       // Transparently support React.Fragment and its children.
       routes.push.apply(
         routes,
-        createRoutesFromChildren(element.props.children, parentPath)
+        createRoutesFromChildren(element.props.children, treePath)
       );
       return;
     }
@@ -591,7 +593,6 @@ export function createRoutesFromChildren(
       "An index route cannot have child routes."
     );
 
-    let treePath = [...parentPath, index];
     let route: RouteObject = {
       id: element.props.id || treePath.join("-"),
       caseSensitive: element.props.caseSensitive,