How to get an array of all possible route names for useRoute.

[1EDExg0ffyXfTEqdIUAYNZGnCeajIxMWd2vaQeP]

In my main.tsx, I want to match on all routes and dispatch to the correct element. I want to make sure I don't forget to pass any route to useRoute, but I found no method on router to get all routes, so this is what I currently use, but it feels hackish. Does anyone have a better solution?

export const router = createRouter({
  Root: "/",
  Index: "/contacts",
  Contact: "/contacts/:id",
  EditContact: "/contacts/:id/edit",
  DestroyContact: "/contacts/:id/destroy",
});

// remove pushRoute, push and replace
export const allRouteNames = Object.keys(router).filter(
  /^[A-Z].*/.test
) as Parameters<typeof router.useRoute>[0];


const App: FC = async () => {
  const route = router.useRoute(allRouteNames)!;

  switch (route.name) {
    case "Root":
      return <Root />;
    case "Contact":
      return <Contact contactId={route.params.id} />;
    case "EditContact":
      return <EditContact contactId={route.params.id} />;
    case "DestroyContact":
      await deleteContact(route.params.id);
      return router.push("Root");
    default:
      route satisfies never;
  }
};

[1EDExg0ffyXfTEqdIUAYNZGnCeajIxMWd2vaQeP]

I think this is the same problem as #27

[1EDExg0ffyXfTEqdIUAYNZGnCeajIxMWd2vaQeP]

Also #3

[zoontek]

@1EDExg0ffyXfTEqdIUAYNZGnCeajIxMWd2vaQeP #27 is not the same issue. But #3 is, yeah.
This can be easily solved using idiomatic TypeScript:

const routes = {
  Root: "/",
  Index: "/contacts",
  Contact: "/contacts/:id",
  EditContact: "/contacts/:id/edit",
  DestroyContact: "/contacts/:id/destroy",
} as const; // declare routes as const

type Routes = typeof routes;
type RouteName = keyof Routes;

export const router = createRouter(routes);

// the cast is necessary since Object.keys typing is not that good
// https://swan-io.github.io/boxed/dict doesn't have this issue
export const routeNames = Object.keys(routes) as RouteName[];

// You can also consider:
export const useAllRoutes = () => useRoute(routeNames);

const App: FC = async () => {
  const route = router.useRoute(routeNames);

  switch (route.name) {
    case "Root":
      return <Root />;
    case "Contact":
      return <Contact contactId={route.params.id} />;
    case "EditContact":
      return <EditContact contactId={route.params.id} />;
    case "DestroyContact":
      await deleteContact(route.params.id);
      return router.push("Root");
    default:
    // route satisfies never;
  }
};