Listing routes at runtime

[morzel85]

Such code allows me to get a TypeScript union of available routes (from chosen tree):

export type ExampleRoutes = ParseRoute<typeof exampleTree>['fullPath'];

Static checks, nice!

Is it also possible to get a list of routes that will be usable at runtime?
Let's say I want to iterate through routes or validate them...

Maybe its possible to get a string enum that is usable both in types and values space?

[schiller-manuel]

How about router.routesByPath?

[flipmotion]

Hi @schiller-manuel

Try to check this following

export type GetTFrom<T, TRouteTree extends AnyRoute> = T extends StrictOrFrom<infer TFrom extends RouteIds<TRouteTree>> ? TFrom : never;

this will return all suggestions of your router as list

I guess you can just check how was implemented useSearch/useParams

[seedy]

With useRouter hook, I found 2 different solutions, thanks to @schiller-manuel :

import {useRouter } from '@tanstack/react-router';


const {routesByPath, flatRoutes} = useRouter();

// routesByPath is an object with routes pathnames as keys and Route objects as values
// flatRoutes is an array of Route objects

[ianzone]

This should be listed in docs

[lpolon]

The initial question suggested that an easy way to get the types of all available routes is like:

export type ExampleRoutes = ParseRoute<typeof exampleTree>['fullPath'];

however, as far as I can tell, ParseRoute is not available anymore:
#824 (reply in thread)

and is not documented:
https://tanstack.com/router/v1/docs/framework/react/guide/type-utilities

but given useRouter().routesByPath, looks straightforward to get the types like:

export type ExampleRoutes = keyof RegisteredRouter['routesByPath'];