genetic-orange

implementing the breadcrumbs example in docs to a typescript project

In the docs there is an example to add breadcrumbs to your layout. https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context

export const Route = createRootRoute({
  component: () => {
    const matches = useRouterState({ select: (s) => s.matches })

    const breadcrumbs = matches
      .filter((match) => match.context.getTitle)
      .map(({ pathname, context }) => {
        return {
          title: context.getTitle(),
          path: pathname,
        }
      })

    // ...
  },
})

export const Route = createRootRoute({
  component: () => {
    const matches = useRouterState({ select: (s) => s.matches })

    const breadcrumbs = matches
      .filter((match) => match.context.getTitle)
      .map(({ pathname, context }) => {
        return {
          title: context.getTitle(),
          path: pathname,
        }
      })

    // ...
  },
})

But how can i add this getTitle function to each createFileRoute function with typescript? getting this error now

Object literal may only specify known properties, and 'getTitle' does not exist in type '(ctx: RouteContextOptions<Route<RootRoute<undefined, MyRouterContext, AnyContext, AnyContext, {}, undefined, unknown, unknown>, "", "", "/_app", "/_app", ... 7 more ..., unknown>, Record<...>, AnyContext, {}>) => any'

Object literal may only specify known properties, and 'getTitle' does not exist in type '(ctx: RouteContextOptions<Route<RootRoute<undefined, MyRouterContext, AnyContext, AnyContext, {}, undefined, unknown, unknown>, "", "", "/_app", "/_app", ... 7 more ..., unknown>, Record<...>, AnyContext, {}>) => any'

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.

9 Replies

genetic-orangeOP•14mo ago

the ai in the docs comes up with this solution which doesnt work

export interface MyRouteContext {
  getTitle: () => string; // Define the getTitle function
}

export const Route = createFileRoute('/_app/claims/')({
  context: {
    getTitle: () => 'Posts Page',
  },

export interface MyRouteContext {
  getTitle: () => string; // Define the getTitle function
}

export const Route = createFileRoute('/_app/claims/')({
  context: {
    getTitle: () => 'Posts Page',
  },

Hm found out i can use staticData for that in tanstack-router.d.ts file

import '@tanstack/react-router'

declare module '@tanstack/react-router' {
   interface StaticDataRouteOption {
     getTitle?: () => string; // Make this property required
   }
}

import '@tanstack/react-router'

declare module '@tanstack/react-router' {
   interface StaticDataRouteOption {
     getTitle?: () => string; // Make this property required
   }
}

but also found out the example uses the matches it has on that route. That are not really breadcrumbs right? If im on / it matches only that If im on /claims it matches only that and not / I basically want / to be named 'dashboard' and claims to be named 'claims' and when im on dashboard the breadcrumbs should be 'dashboard' but on claims it should be dashboard -> claims Is there a way to basically get the route /claims and split it and found the matches per string in the array

rival-black•14mo ago

does this work?

export const Route = createFileRoute('/_app/claims/')({
  context: () => ({
    getTitle: () => 'Posts Page',
  }),

export const Route = createFileRoute('/_app/claims/')({
  context: () => ({
    getTitle: () => 'Posts Page',
  }),

genetic-orangeOP•14mo ago

That works indeed, thanks! How do you create breadcrumbs with this? I the docs it has an example like this

    const matches = useRouterState({ select: (s) => s.matches });

    const breadcrumbs = matches
      .filter((match) => match.context.getTitle)
      .map(({ pathname, context }) => {
        return {
          title: context.getTitle(),
          path: pathname,
        };
      });

    const matches = useRouterState({ select: (s) => s.matches });

    const breadcrumbs = matches
      .filter((match) => match.context.getTitle)
      .map(({ pathname, context }) => {
        return {
          title: context.getTitle(),
          path: pathname,
        };
      });

But that only returns the route that are currently being rendered. lets say i have the folder structure shown in the screenshot /_app index.tsx /posts $postId.tsx posts.tsx
on index i want to show 'Dashboard' on posts the url is /posts and want to show 'Dashboard -> Posts' and on a single post the url is /posts/$id and the breadcrumbs should be 'Dashboard -> posts -> $id' so basically what i want is that the app folder has a layout component that automatically generates breadcrumbs for wherever you are.

rival-black•14mo ago

here is an example I created for you: https://stackblitz.com/edit/tanstack-router-ic2jhk

Manuel Schiller

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

genetic-orangeOP•14mo ago

O wow really didnt expect you to do this, Thanks a lot! Do you mind explain a little why we need the 'route.tsx' component to set the 'Posts' title and the layout to set the 'dashboard' title instead of the actual routes?

grumpy-cyan•14mo ago

the route.tsx will match on both index.tsx and $id.tsx, so it will show Posts on both, then on the index.tsx you dont want to show anything and on $id.tsx you want to show Posts > $id (where $id is the id of the post) index.tsx will not match on $id.tsx, so you would end up with Posts on index.tsx and $id on $id.tsx instead of Posts > $id, that's why route.tsx is needed

other-emerald•12mo ago

Hi everyone Is this working?

rival-black•12mo ago

is it not?

correct-apricot•12mo ago

this is something that i have been struggling with too

Gaming

Programming

implementing the breadcrumbs example in docs to a typescript project

Did you find this page helpful?