conscious-sapphire

Processing accumulated route context to generate breadcrumbs

Tried following this example: https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context But I am getting a: Property 'getTitle' does not exist on type 'AnyContext'. when I try to use the breadcrumbs example. Why's that?

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

4 Replies

conscious-sapphireOP•11mo ago

Well now my question is more like how can I assign context to lazy file routes.

xenial-black•11mo ago

create a lazy and a non lazy route for the same path/id. put the context in the non lazy route definition. also consider using automatic code splitting so you don't need manual lazy routes

conscious-sapphireOP•11mo ago

I ended up doing this:

const component = lazyRouteComponent(
  () => import("@/features/orders"),
  "CreateOrderPage"
);

export const Route = createFileRoute("/_auth/orders/create/")({
  component,
  beforeLoad: () => ({
    breadcrumb: {
      title: "Create Order",
    },
  }),
});

const component = lazyRouteComponent(
  () => import("@/features/orders"),
  "CreateOrderPage"
);

export const Route = createFileRoute("/_auth/orders/create/")({
  component,
  beforeLoad: () => ({
    breadcrumb: {
      title: "Create Order",
    },
  }),
});

What alternative approach were you talking about?

xenial-black•11mo ago

https://tanstack.com/router/v1/docs/framework/react/guide/code-splitting/#using-automatic-code-splitting

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

Gaming

Programming

Processing accumulated route context to generate breadcrumbs

Did you find this page helpful?