probo/apps/console2/src/routes.tsx

import {
  createBrowserRouter,
  useRouteError,
  type RouteObject,
} from "react-router";
import { MainLayout } from "./layouts/MainLayout";
import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import { lazy, Suspense, type FC } from "react";
import { UnAuthenticatedError } from "./providers/RelayProviders";

function ErrorBoundary() {
  const error = useRouteError();
  if (error instanceof UnAuthenticatedError) {
    return <div></div>;
  }
  console.log(error);
  return <div>error</div>;
}

type Route = {
  path: string;
  Component: FC;
  children?: Route[];
  ErrorBoundary?: FC;
  fallback?: FC;
};

const routes = [
  {
    path: "/auth",
    Component: AuthLayout,
    children: [
      {
        path: "login",
        Component: lazy(() => import("./pages/auth/LoginPage")),
      },
    ],
  },
  {
    path: "/",
    Component: CenteredLayout,
    fallback: CenteredLayoutSkeleton,
    children: [
      {
        path: "",
        Component: lazy(() => import("./pages/OrganizationsPage")),
      },
      {
        path: "organizations/new",
        Component: lazy(
          () => import("./pages/organizations/NewOrganizationPage")
        ),
      },
    ],
  },
  {
    path: "/organizations/:organizationId",
    Component: MainLayout,
    ErrorBoundary: ErrorBoundary,
    children: [
      {
        path: "risks",
        Component: lazy(() => import("./pages/organizations/risks/RisksPage")),
      },
    ],
  },
] satisfies Route[];

/**
 * Wrap component with a suspense to handle lazy loading & relay loading states
 */
function routeTransformer(route: Route): RouteObject {
  if ("fallback" in route && route.fallback) {
    return {
      ...route,
      children: route.children?.map(routeTransformer),
      Component: () => (
        <Suspense fallback={<route.fallback />}>
          <route.Component />
        </Suspense>
      ),
    } as RouteObject;
  }
  return route as RouteObject;
}

export const router = createBrowserRouter(routes.map(routeTransformer));