fix: Strengthen route typings

contributors.yml

@@ -36,6 +36,7 @@
 - goldins
 - gowthamvbhat
 - GraxMonzo
+- GuptaSiddhant
 - haivuw
 - hernanif1
 - hongji00

packages/react-router-dom/index.tsx

@@ -78,8 +78,10 @@ export type {
   DataRouteObject,
   Fetcher,
   Hash,
+  IndexRouteObject,
   IndexRouteProps,
   JsonFunction,
+  LayoutRouteObject,
   LayoutRouteProps,
   LoaderFunction,
   LoaderFunctionArgs,
@@ -97,6 +99,7 @@ export type {
   PathMatch,
   Pathname,
   PathPattern,
+  PathRouteObject,
   PathRouteProps,
   RedirectFunction,
   RelativeRoutingType,

packages/react-router-native/index.tsx

@@ -27,8 +27,10 @@ export type {
   DataRouteObject,
   Fetcher,
   Hash,
+  IndexRouteObject,
   IndexRouteProps,
   JsonFunction,
+  LayoutRouteObject,
   LayoutRouteProps,
   LoaderFunction,
   LoaderFunctionArgs,
@@ -46,6 +48,7 @@ export type {
   PathMatch,
   Pathname,
   PathPattern,
+  PathRouteObject,
   PathRouteProps,
   RedirectFunction,
   RelativeRoutingType,

packages/react-router/__tests__/createRoutesFromChildren-test.tsx

@@ -196,4 +196,28 @@ describe("creating routes from JSX", () => {
       ]
     `);
   });
+
+  it("throws when the index route has a path", () => {
+    expect(() => {
+      createRoutesFromChildren(
+        <Route path="/">
+          {/* @ts-expect-error */}
+          <Route index path="foo" />
+        </Route>
+      );
+    }).toThrow("An index route cannot have a path or child routes.");
+  });
+
+  it("throws when the index route has children", () => {
+    expect(() => {
+      createRoutesFromChildren(
+        <Route path="/">
+          {/* @ts-expect-error */}
+          <Route index>
+            <Route path="users" />
+          </Route>
+        </Route>
+      );
+    }).toThrow("An index route cannot have a path or child routes.");
+  });
 });

packages/react-router/index.ts

@@ -64,8 +64,11 @@ import {
 import type {
   DataRouteMatch,
   DataRouteObject,
+  IndexRouteObject,
+  LayoutRouteObject,
   Navigator,
   NavigateOptions,
+  PathRouteObject,
   RouteMatch,
   RouteObject,
   RelativeRoutingType,
@@ -116,8 +119,10 @@ export type {
   DataRouteObject,
   Fetcher,
   Hash,
+  IndexRouteObject,
   IndexRouteProps,
   JsonFunction,
+  LayoutRouteObject,
   LayoutRouteProps,
   LoaderFunction,
   LoaderFunctionArgs,
@@ -135,6 +140,7 @@ export type {
   PathMatch,
   Pathname,
   PathPattern,
+  PathRouteObject,
   PathRouteProps,
   RedirectFunction,
   RelativeRoutingType,

packages/react-router/lib/components.tsx

@@ -26,6 +26,9 @@ import type {
   RouteObject,
   Navigator,
   RelativeRoutingType,
+  PathRouteObject,
+  LayoutRouteObject,
+  IndexRouteObject,
 } from "./context";
 import {
   LocationContext,
@@ -220,49 +223,28 @@ export function Outlet(props: OutletProps): React.ReactElement | null {
   return useOutlet(props.context);
 }
 
-interface DataRouteProps {
-  id?: RouteObject["id"];
-  loader?: RouteObject["loader"];
-  action?: RouteObject["action"];
-  errorElement?: RouteObject["errorElement"];
-  shouldRevalidate?: RouteObject["shouldRevalidate"];
-  handle?: RouteObject["handle"];
-}
-
-export interface RouteProps extends DataRouteProps {
-  caseSensitive?: boolean;
-  children?: React.ReactNode;
-  element?: React.ReactNode | null;
-  index?: boolean;
-  path?: string;
-}
+// Create JSX-specific types from the RouteObjects, essentially changing
+// ReactElement to ReactNode
+export type PathRouteProps = Omit<PathRouteObject, "children"> & {
+  children?: React.ReactNode | null;
+};
 
-export interface PathRouteProps extends DataRouteProps {
-  caseSensitive?: boolean;
-  children?: React.ReactNode;
-  element?: React.ReactNode | null;
-  index?: false;
-  path: string;
-}
+export type LayoutRouteProps = Omit<LayoutRouteObject, "children"> & {
+  children?: React.ReactNode | null;
+};
 
-export interface LayoutRouteProps extends DataRouteProps {
-  children?: React.ReactNode;
-  element?: React.ReactNode | null;
-}
+export type IndexRouteProps = Omit<IndexRouteObject, "children"> & {
+  children?: undefined;
+};
 
-export interface IndexRouteProps extends DataRouteProps {
-  element?: React.ReactNode | null;
-  index: true;
-}
+export type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
 
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
  * @see https://reactrouter.com/docs/en/v6/components/route
  */
-export function Route(
-  _props: PathRouteProps | LayoutRouteProps | IndexRouteProps
-): React.ReactElement | null {
+export function Route(_props: RouteProps): React.ReactElement | null {
   invariant(
     false,
     `A <Route> is only ever to be used as the child of <Routes> element, ` +
@@ -569,6 +551,12 @@ export function createRoutesFromChildren(
       }] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>`
     );
 
+    invariant(
+      !element.props.index ||
+        (element.props.path === undefined && !element.props.children),
+      "An index route cannot have a path or child routes."
+    );
+
     let treePath = [...parentPath, index];
     let route: RouteObject = {
       id: element.props.id || treePath.join("-"),
@@ -619,7 +607,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;

packages/react-router/lib/context.ts

@@ -6,23 +6,40 @@ import type {
   Router,
   StaticHandlerContext,
   To,
-  AgnosticRouteObject,
   AgnosticRouteMatch,
+  AgnosticIndexRouteObject,
+  AgnosticLayoutRouteObject,
+  AgnosticPathRouteObject,
 } from "@remix-run/router";
 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 {
+export type IndexRouteObject = Omit<AgnosticIndexRouteObject, "children"> & {
+  children?: undefined;
+  element?: React.ReactNode | null;
+  errorElement?: React.ReactNode | null;
+};
+export type PathRouteObject = Omit<AgnosticPathRouteObject, "children"> & {
   children?: RouteObject[];
   element?: React.ReactNode | null;
   errorElement?: React.ReactNode | null;
-}
+};
+export type LayoutRouteObject = Omit<AgnosticLayoutRouteObject, "children"> & {
+  children?: RouteObject[];
+  element?: React.ReactNode | null;
+  errorElement?: React.ReactNode | null;
+};
 
-export interface DataRouteObject extends RouteObject {
+export type RouteObject =
+  | IndexRouteObject
+  | PathRouteObject
+  | LayoutRouteObject;
+
+export type DataRouteObject = RouteObject & {
   children?: DataRouteObject[];
   id: string;
-}
+};
 
 export interface RouteMatch<
   ParamKey extends string = string,

packages/router/__tests__/router-test.ts

@@ -28,7 +28,7 @@ import {
 } from "../index";
 
 // Private API
-import type { TrackedPromise } from "../utils";
+import type { AgnosticRouteObject, TrackedPromise } from "../utils";
 import { AbortedDeferredError } from "../utils";
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1002,6 +1002,44 @@ describe("a router", () => {
       );
     });
 
+    it("throws if it finds invalid route objects", async () => {
+      let routes: AgnosticRouteObject[] = [
+        // @ts-expect-error
+        {
+          path: "path",
+          index: true,
+        },
+      ];
+      expect(() =>
+        createRouter({
+          routes,
+          history: createMemoryHistory(),
+        })
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Cannot specify paths or children on an index route"`
+      );
+
+      routes = [
+        // @ts-expect-error
+        {
+          index: true,
+          children: [
+            {
+              path: "nope",
+            },
+          ],
+        },
+      ];
+      expect(() =>
+        createRouter({
+          routes,
+          history: createMemoryHistory(),
+        })
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Cannot specify paths or children on an index route"`
+      );
+    });
+
     it("supports a basename prop for route matching", async () => {
       let history = createMemoryHistory({
         initialEntries: ["/base/name/path"],

packages/router/index.ts

@@ -3,8 +3,14 @@ import { convertRoutesToDataRoutes } from "./utils";
 export type {
   ActionFunction,
   ActionFunctionArgs,
+  AgnosticDataIndexRouteObject,
+  AgnosticDataLayoutRouteObject,
+  AgnosticDataPathRouteObject,
   AgnosticDataRouteMatch,
   AgnosticDataRouteObject,
+  AgnosticIndexRouteObject,
+  AgnosticLayoutRouteObject,
+  AgnosticPathRouteObject,
   AgnosticRouteMatch,
   AgnosticRouteObject,
   TrackedPromise,