Issue with Link Component Typing When Generating Routes Programmatically

[roflc0pter]

---

TL;DR:
Typing for the to property in the Link component doesn't work when routes are programmatically generated. Looking for assistance and a solution! :)

---

Hey there,

In my applications, I like to centralize navigation and routing properties, so I generate a list that contains all the necessary information to create menus, breadcrumbs, page titles, and routes.

However, when I generate the routes programmatically, I'm not getting the full list of available paths or links, which causes TypeScript errors wherever I use the Link component for navigation.

As seen in the screenshot below, only three "links" are available:

I'm unsure if this is a bug or if I’m missing something, but I've tried everything to resolve the typing issue.

What I've noticed is that the generated routes only get the root type, which seems to be a default fallback from the library. All other nested routes are typed as 'any'.

Here's my route generator code:

import { AppRoute } from "@mytypes/common";
import { createRoute, RouteOptions } from "@tanstack/react-router";

export function generateRoutes(
  routesConfig: AppRoute[],
  getParentRoute: RouteOptions["getParentRoute"],
) {
  return routesConfig.map((routeConfig) => {
    const hasChildren = routeConfig?.children?.length > 0;
    const isParentOfIndexRoute = hasChildren && routeConfig.path !== "/";
    const component = isParentOfIndexRoute ? null : routeConfig.component;

    const {
      page: { pageHeader = "XXX", title = "XXX" } = {},
      navigation: { Icon = null, isGroup = false, label = pageHeader, showOnSidebar = true } = {},
      permissions = null,
    } = routeConfig;

    const staticDataPage = {
      pageHeader: pageHeader,
      title: title,
    };
    const staticDataNavigation = {
      Icon: Icon,
      isGroup: isGroup,
      label: label,
      showOnSidebar: showOnSidebar,
    };

    // create main route
    const pathRoute = createRoute({
      getParentRoute,
      path: routeConfig.path,
      component: component,
      staticData: {
        page: staticDataPage,
        navigation: staticDataNavigation,
        permissions: permissions,
      },
    });

    const childRoutes = [];

    // create index route (e.g., users -> /)
    if (isParentOfIndexRoute) {
      childRoutes.push(
        createRoute({
          getParentRoute: () => pathRoute,
          path: "/",
          component: routeConfig.component,
          staticData: {
            page: staticDataPage,
            navigation: { ...staticDataNavigation, showOnSidebar: false },
            permissions: permissions,
          },
        }),
      );
    }

    // create child routes
    if (hasChildren) {
      childRoutes.push(...generateRoutes(routeConfig.children, () => pathRoute));
    }

    // add them to the main route
    if (childRoutes.length) {
      pathRoute.addChildren([...childRoutes]);
    }

    return pathRoute;
  });
}

This is how I use it in the app:

import { generateRoutes } from "@lib/generate-routes";
import { ErrorComponent, createRootRoute, createRouter } from "@tanstack/react-router";
import appRoutes from "./app-routes";
import { NotFound, RootComponent } from "./root-component";

const root = createRootRoute({
  component: RootComponent,
});

export const generatedRoutes = generateRoutes(appRoutes, () => root);

export const routeTree = root.addChildren([...generatedRoutes]);

export const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
  defaultComponent: RootComponent,
  defaultErrorComponent: ErrorComponent,
  defaultNotFoundComponent: NotFound,
});

And here is what my appRoutes look like:

import LoginPage from "@components/login/login-page";
import RolesPage from "@components/roles/roles-page";
import UsersPage from "@components/users/users-page";
import WarehousesPage from "@components/warehouses/warehouses-page";
import { AppRoute } from "@mytypes/common";
import { HouseLine, Keyhole, UserCircleGear, Users, Warehouse } from "@phosphor-icons/react";
import { RootLayout } from "./root-component";

export interface AppRoute {
  path: string;
  component?: RouteComponent;
  page?: {
    title?: string;
    pageHeader?: ReactNode;
  };
  navigation?: {
    isGroup?: boolean;
    showOnSidebar?: boolean;
    Icon?: Icon;
    label?: ReactNode;
  };
  permissions?: (string | string[])[];
  children?: AppRoute[];
}

export default [
  {
    path: "/",
    component: RootLayout,
    page: {
      title: "XXX",
      pageHeader: "XXX",
    },
    navigation: {
      Icon: HouseLine,
      label: "Home",
    },
    children: [
      {
        path: "warehouses",
        component: WarehousesPage,
        page: {
          title: "Lagerhäuser",
          pageHeader: "Lagerhäuser",
        },
        navigation: {
          isGroup: true,
          Icon: Warehouse,
          label: "Lagerhäuser",
        },
      },
      {
        path: "iam",
        component: () => <>IAM - Implementiere mich</>,
        page: {
          title: "IAM",
          pageHeader: "Nutzer- & Zugriffverwaltung",
        },
        navigation: {
          isGroup: true,
          Icon: HouseLine,
          label: "Nutzer & Zugriff",
        },
        children: [
          {
            path: "users",
            component: UsersPage,
            page: {
              title: "Benutzer",
              pageHeader: "Benutzer",
            },
            navigation: {
              Icon: Users,
              label: "Benutzer",
            },
            children: [
              {
                path: "$id",
                component: () => <>Benutzer - Implementiere mich</>,
              },
            ],
          },
          {
            path: "roles",
            component: RolesPage,
            page: {
              title: "Rollen",
              pageHeader: "Rollen",
            },
            navigation: {
              Icon: UserCircleGear,
              label: "Rollen",
            },
            children: [
              {
                path: "$id",
                component: () => <>Rollen - Implementiere mich</>,
              },
            ],
          },
          {
            path: "permissions",
            component: () => <>IAM - Implementiere mich</>,
            page: {
              title: "Berechtigungen",
              pageHeader: "Berechtigungen",
            },
            navigation: {
              Icon: Keyhole,
              label: "Berechtigungen",
            },
            children: [
              {
                path: "$id",
                component: () => <>Berechtigungen - Implementiere mich</>,
              },
            ],
          },
        ],
      },
      {
        path: "profile",
        component: () => <>Profile - Implementiere mich</>,
        page: {
          title: "Profilseite",
          pageHeader: "Profilseite",
        },
        navigation: {
          showOnSidebar: false,
        },
      },
    ],
  },
  {
    path: "/login",
    component: LoginPage,
    navigation: {
      showOnSidebar: false,
    },
  },
] as AppRoute[];

My Dependencies:

"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
"@phosphor-icons/react": "^2.1.7",
"@tanstack/react-query": "^5.56.2",
"@tanstack/react-router": "~1.45.7",
"antd": "^5.20.6",
"axios": "^1.7.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",

I’d appreciate any help or guidance on how to resolve this! Thanks!

[schiller-manuel]

if you build the route tree by looping over the array, TS types cannot be inferred. you must explicitly define each route just like the docs explain it:

https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing

[roflc0pter]

Hey, thanks a lot for the quick response!

I think I’ll stick with the trade-off of less perfect typing in favor of keeping my centralized route definitions—it works better for my use case :)

For anyone else running into similar TypeScript issues, you can always rely on general types like AnyRoute or AnyRouteMatch as a workaround.

Thanks again!

[roddc]

Hi, do you generate your routes in a component? I'm having trouble generating routes in component, because I need to get the route paths from backend after the user logged in, I only create some routes like login page globally. However, when I add some new routes in useEffect hook, the added route paths are not found, I need to re-initialize the router in my Router component. Is there a recommend way to add children route in a fetch api call?