createBrowserRouter with Intellisense suggestions / exhaustive union types for route IDs

App.tsx

import { RouterProvider } from "react-router";
import { createBrowserRouter } from "react-router-dom";
import { routes } from "routes";


function App() {
  //...
  const router = createBrowserRouter(routes);

routes.ts

import Home from "pages/Home";
import RouteError from "components/Error/RouteError";
import { RouteObject } from "react-router";

const ROUTES = [
  {
    path: "/",
    element: <Home />,
    errorElement: <RouteError />,
    id: "Home",
  },
  //...
] as const;

//alternatively, just use
//export const routes = [...ROUTES].slice() as RouteObject[];
export const routes = [...ROUTES] as Mutable<typeof ROUTES> as RouteObject[];

type RouteID = (typeof ROUTES)[number]["id"];
type RoutePath = (typeof ROUTES)[number]["path"];

type RoutePaths = {
  [key in RouteID]: RoutePath;
};

export const routePaths: RoutePaths = Object.fromEntries(
  ROUTES.map((route) => [route.id, route.path])
) as RoutePaths;

type Mutable<T extends object> = {
  -readonly [K in keyof T]: T[K];
};