metropolitan-bronze

createRoute context argument still any despite AnyRouteWithContext<TestContext>

I'm trying to make sure my route has proper context typing instead of any. I have lots of routes and I'd like context to be available. I have this setup:

import {
  type AnyRoute,
  type AnyRouteWithContext,
  createRoute,
} from "@tanstack/react-router";
import { lazy } from "react";

interface TestContext {
  foo: string;
  bar: number;
}

export const createBookingRoutes = (
  Parent: AnyRouteWithContext<TestContext>
): AnyRoute => {
  const CreateBookingRoute = createRoute({
    getParentRoute: () => Parent,
    path: "create",
    component: lazy(() => import("./pages/CreateBooking")),
    loader: ({ context }) => {
      console.log(context); // <-- any here
    },
  });

  return CreateBookingRoute;
};

import {
  type AnyRoute,
  type AnyRouteWithContext,
  createRoute,
} from "@tanstack/react-router";
import { lazy } from "react";

interface TestContext {
  foo: string;
  bar: number;
}

export const createBookingRoutes = (
  Parent: AnyRouteWithContext<TestContext>
): AnyRoute => {
  const CreateBookingRoute = createRoute({
    getParentRoute: () => Parent,
    path: "create",
    component: lazy(() => import("./pages/CreateBooking")),
    loader: ({ context }) => {
      console.log(context); // <-- any here
    },
  });

  return CreateBookingRoute;
};

I am using code based routing. I expected that passing AnyRouteWithContext<TestContext> for Parent would make the context argument properly typed, but TypeScript still shows it as any. My best guess is that it's because it's not directly importing the route. What’s the correct way to ensure the context type flows through here instead of defaulting to any? My end goal was to have something like this

import { createBookingRoutes } from "@routes/app/bookings";
import { createNotFoundRoute } from "@routes/app/NotFound";
import { createRoute } from "@tanstack/react-router";
import { lazy } from "react";
import { AppBranch } from "./root";

export const buildAppChildren = () => {
  const AppIndex = createRoute({
    getParentRoute: () => AppBranch,
    component: lazy(() => import("@routes/app/Dashboard")),
    path: "/dashboard",
    loader({ context }) {
      console.log(context.foo, bar etc..); // <-- context is known here
    },
  });

  return [
    AppIndex,
    createBookingRoutes(AppBranch),
    createNotFoundRoute(AppBranch),
  ];
};

import { createBookingRoutes } from "@routes/app/bookings";
import { createNotFoundRoute } from "@routes/app/NotFound";
import { createRoute } from "@tanstack/react-router";
import { lazy } from "react";
import { AppBranch } from "./root";

export const buildAppChildren = () => {
  const AppIndex = createRoute({
    getParentRoute: () => AppBranch,
    component: lazy(() => import("@routes/app/Dashboard")),
    path: "/dashboard",
    loader({ context }) {
      console.log(context.foo, bar etc..); // <-- context is known here
    },
  });

  return [
    AppIndex,
    createBookingRoutes(AppBranch),
    createNotFoundRoute(AppBranch),
  ];
};

Should I be taking an alternate approach? Cheers!

2 Replies

conscious-sapphire•2mo ago

this is not how code based routing works with typesafety in tanstack router

conscious-sapphire•2mo ago

https://tanstack.com/router/latest/docs/framework/react/routing/code-based-routing#manually-building-the-route-tree

Code-Based Routing | TanStack Router React Docs

[!TIP] Code-based routing is not recommended for most applications. It is recommended to use instead. ⚠️ Before You Start If you're using , skip this guide. If you still insist on using code-based rou...

Gaming

Programming

createRoute context argument still any despite AnyRouteWithContext<TestContext>

Did you find this page helpful?