T
TanStack•14mo ago
vicious-gold

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!
1 Reply
like-gold
like-gold•9mo ago
Did you find a solution?

Did you find this page helpful?