From 18d4abaa0e9aea6b4c5b01e4630f2283785562bf Mon Sep 17 00:00:00 2001 From: Siddhant Gupta Date: Sun, 25 Sep 2022 13:25:15 +0300 Subject: [PATCH 1/5] Add conditional type to RouteObject - RouteObject type should accept either index or children. --- packages/react-router/lib/context.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts index bb0fa2396a..db84e38c7a 100644 --- a/packages/react-router/lib/context.ts +++ b/packages/react-router/lib/context.ts @@ -13,16 +13,14 @@ import type { Action as NavigationType } from "@remix-run/router"; // Create react-specific types from the agnostic types in @remix-run/router to // export from react-router -export interface RouteObject extends AgnosticRouteObject { - children?: RouteObject[]; +export type RouteObject = Omit & { element?: React.ReactNode | null; errorElement?: React.ReactNode | null; -} +} & ({ index?: false; children?: RouteObject[] } | { index: true }); -export interface DataRouteObject extends RouteObject { - children?: DataRouteObject[]; +export type DataRouteObject = Omit & { id: string; -} +} & ({ index?: false; children?: DataRouteObject[] } | { index: true }); export interface RouteMatch< ParamKey extends string = string, From f0185d3e64f759f6c78ca9201d46424f59fd8050 Mon Sep 17 00:00:00 2001 From: Siddhant Gupta Date: Sun, 25 Sep 2022 14:08:54 +0300 Subject: [PATCH 2/5] Add contributor --- contributors.yml | 1 + packages/react-router/lib/components.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index 044bdc5f48..205fe06b05 100644 --- a/contributors.yml +++ b/contributors.yml @@ -36,6 +36,7 @@ - goldins - gowthamvbhat - GraxMonzo +- GuptaSiddhant - haivuw - hernanif1 - hongji00 diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index cd1795e95a..08dadbf005 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -584,7 +584,7 @@ export function createRoutesFromChildren( handle: element.props.handle, }; - if (element.props.children) { + if (element.props.children && !route.index) { route.children = createRoutesFromChildren( element.props.children, treePath From 3de814c23614b41295142a7a3aec79b2511dc5d7 Mon Sep 17 00:00:00 2001 From: Siddhant Gupta Date: Sun, 25 Sep 2022 14:11:19 +0300 Subject: [PATCH 3/5] Enhance children if index is falsy --- packages/react-router/lib/components.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index 08dadbf005..cf6abe5da1 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -619,7 +619,7 @@ export function enhanceManualRouteObjects( if (routeClone.hasErrorBoundary == null) { routeClone.hasErrorBoundary = routeClone.errorElement != null; } - if (routeClone.children) { + if (!routeClone.index && routeClone.children) { routeClone.children = enhanceManualRouteObjects(routeClone.children); } return routeClone; From 9132cfe5081cf54ead4311222734cb91440ba2c3 Mon Sep 17 00:00:00 2001 From: Siddhant Gupta Date: Tue, 27 Sep 2022 09:20:28 +0300 Subject: [PATCH 4/5] Throw error in createRoutesFromChildren + test --- .../createRoutesFromChildren-test.tsx | 22 +++++++++++++++++++ packages/react-router/lib/components.tsx | 3 ++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/react-router/__tests__/createRoutesFromChildren-test.tsx b/packages/react-router/__tests__/createRoutesFromChildren-test.tsx index a2727a13e4..888d8ceef5 100644 --- a/packages/react-router/__tests__/createRoutesFromChildren-test.tsx +++ b/packages/react-router/__tests__/createRoutesFromChildren-test.tsx @@ -196,4 +196,26 @@ describe("creating routes from JSX", () => { ] `); }); + + it("throws when the index route has children", () => { + expect(() => { + createRoutesFromChildren( + 💥} path="/"> + {}} + shouldRevalidate={() => true} + element={

home

} + > + {}} + element={

users index

} + /> + + + ); + }).toThrow("An index route cannot have children routes."); + }); }); diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index cf6abe5da1..c068534cef 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -584,7 +584,8 @@ export function createRoutesFromChildren( handle: element.props.handle, }; - if (element.props.children && !route.index) { + if (element.props.children) { + invariant(!route.index, "An index route cannot have children routes."); route.children = createRoutesFromChildren( element.props.children, treePath From 109ceadbd073ddc8b2f32b87f4bf60cf2389dedc Mon Sep 17 00:00:00 2001 From: Siddhant Gupta Date: Tue, 27 Sep 2022 09:24:04 +0300 Subject: [PATCH 5/5] Update error message --- .../react-router/__tests__/createRoutesFromChildren-test.tsx | 2 +- packages/react-router/lib/components.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-router/__tests__/createRoutesFromChildren-test.tsx b/packages/react-router/__tests__/createRoutesFromChildren-test.tsx index 888d8ceef5..854de937ad 100644 --- a/packages/react-router/__tests__/createRoutesFromChildren-test.tsx +++ b/packages/react-router/__tests__/createRoutesFromChildren-test.tsx @@ -216,6 +216,6 @@ describe("creating routes from JSX", () => { ); - }).toThrow("An index route cannot have children routes."); + }).toThrow("An index route must not have child routes."); }); }); diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index c068534cef..0e252ae99f 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -585,7 +585,7 @@ export function createRoutesFromChildren( }; if (element.props.children) { - invariant(!route.index, "An index route cannot have children routes."); + invariant(!route.index, "An index route must not have child routes."); route.children = createRoutesFromChildren( element.props.children, treePath