Route tree types

[tigawanna]

is there a way to get a type of all the possible routes

import { z } from 'zod'
import { Route, useRouter } from "@tanstack/react-router";
import { authlayout } from "./AuthLayout";
import { SignInForm } from "./components/SignInForm";
import { router } from '@/main';



const signinRouteSearchParamsSchema = z.object({
  redirect: z.string().optional(),
  email: z.string().email().optional(),
});

export const signinRoute = new Route({
  getParentRoute: () => authlayout,
  path: "/",
  validateSearch: (search) => {
    return signinRouteSearchParamsSchema.parse(search);
  },

  component: ({}) => {
    const router = useRouter();
    return (
      <div className="w-full h-full flex items-center justify-center">
        <SignInForm />
      </div>
    );
  },
});

in my case am trying to make sure you can only pass valid routes to

  redirect: z.string().optional(),

instead of just a string

[schiller-manuel]

How would a type of all possible routes help? Wouldn't you need that information at runtime?

[tigawanna]

Was creating a route helper function that generates breadcrumbs links , having all valid routes would help in typing that since I want it to sit at the root layout and dynamically grow and shrink based on the current route

[schiller-manuel]

How about something like this:

type ValidRoutes = ParseRoute<typeof routeTree>['fullPath'];

// this results in for examples/react/kitchen-sink/src/main.tsx
type ValidRoutes = "/" | "/dashboard" | "/dashboard/" | "/dashboard/invoices" | "/dashboard/invoices/" | "/dashboard/invoices/$invoiceId" | "/dashboard/users" | "/dashboard/users/" | "/dashboard/users/user" | "/expensive" | "/profile" | "/login" | "/layout-a" | "/layout-b"

[tigawanna]

Yes I wanted something like this , thank you

[Michota]

Was creating a route helper function that generates breadcrumbs links , having all valid routes would help in typing that since I want it to sit at the root layout and dynamically grow and shrink based on the current route

For me it says that Type alias 'ValidPaths' circularly references itself.ts(2456)

[arishem51]

Was creating a route helper function that generates breadcrumbs links , having all valid routes would help in typing that since I want it to sit at the root layout and dynamically grow and shrink based on the current route

For me it says that Type alias 'ValidPaths' circularly references itself.ts(2456)

same for me, any solution pls?

[schiller-manuel]

can you please provide a minimal complete example by forking one of the existing router examples on stackblitz?

[muneer-abdulsattar]

i used to use this and works fine

import {ParseRoute} from "@tanstack/react-router";`
`export type TRoutes = ParseRoute<typeof routeTree>["fullPath"];

but now i keep getting error of

Module '"@tanstack/react-router"' has no exported member 'ParseRoute'.ts(2305)

[muneer-abdulsattar]

i manage to get it to work using

import { type FileRoutesByTo } from "@/routeTree.gen";
export type TRoutes = keyof FileRoutesByTo;

[Atchferox]

This is the real correct answer :)

[tigawanna]

can confirm as

import { ParseRoute } from "@tanstack/react-router";

was remoevd as of the latest version

[schiller-manuel]

those types are in router-core now.
however, they are still internal types only.
we have public types here: https://tanstack.com/router/latest/docs/framework/react/guide/type-utilities
does this help?