Need help with Breadcrumb component using Shadcn UI and Tanstack Router

Hi everyone,

I'm trying to build a breadcrumb component using Shadcn UI and Tanstack Router, but I'm running into some issues. I found some code online that I've been trying to use, but it's not working as expected.

The code I've been using looks like this:

const breadcrumbs = useRouterState({
  select: state => {
    return state.matches
      .map(match => ({
        title: match.meta?.find(tag => tag.title)!.title as string,
        path: match.pathname,
      }))
      .filter(crumb => Boolean(crumb.title))
  },
})

const breadcrumbs = useRouterState({
  select: state => {
    return state.matches
      .map(match => ({
        title: match.meta?.find(tag => tag.title)!.title as string,
        path: match.pathname,
      }))
      .filter(crumb => Boolean(crumb.title))
  },
})

And this is how I'm defining my routes:

export const Route = createFileRoute("/posts/")({
  component: () => <Posts />,
  meta: () => [
    {
      title: "Posts",
    },
  ],
});

export const Route = createFileRoute("/posts/")({
  component: () => <Posts />,
  meta: () => [
    {
      title: "Posts",
    },
  ],
});

I'm using this code in a demo repository [https://codesandbox.io/p/github/SagarBarpete03/shadcn-tanstack-router/main], but the breadcrumbs are not displaying correctly. For example, when I'm on the "new-post" page, the breadcrumbs show "home > new-post" instead of "home > post > new-post". And when I'm on the "post-1" page, the breadcrumbs show "home > post-1" instead of "home > post > 1".

Can someone please help me figure out what I'm doing wrong? I'd really appreciate any guidance or suggestions on how to properly implement a breadcrumb component using Shadcn UI and Tanstack Router.

Thank you!

TanStack•2y ago•

1 reply

still-lime

Need help with Breadcrumb component using Shadcn UI and Tanstack Router

const breadcrumbs = useRouterState({
  select: state => {
    return state.matches
      .map(match => ({
        title: match.meta?.find(tag => tag.title)!.title as string,
        path: match.pathname,
      }))
      .filter(crumb => Boolean(crumb.title))
  },
})

const breadcrumbs = useRouterState({
  select: state => {
    return state.matches
      .map(match => ({
        title: match.meta?.find(tag => tag.title)!.title as string,
        path: match.pathname,
      }))
      .filter(crumb => Boolean(crumb.title))
  },
})

And this is how I'm defining my routes:

export const Route = createFileRoute("/posts/")({
  component: () => <Posts />,
  meta: () => [
    {
      title: "Posts",
    },
  ],
});

export const Route = createFileRoute("/posts/")({
  component: () => <Posts />,
  meta: () => [
    {
      title: "Posts",
    },
  ],
});

Need help with Breadcrumb component using Shadcn UI and Tanstack Router

Similar Threads

Need help with Breadcrumb component using Shadcn UI and Tanstack Router

Similar Threads

Similar Threads

Similar Threads