Breadcrumbs: Prevent Router Context From Being Inherited
I'm building breadcrumbs that's using the Router Context guide from the official docs. The issue I'm having is that a Router context in a descendant route is inherited from the parent route, and it's resulting in duplicate breadcrumbs.
Is there a way to prevent this default behavior other than just filtering and checking for duplicates?
import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
import { NuqsAdapter } from 'nuqs/adapters/tanstack-router'
import { Toaster } from 'sonner'
import { ConfirmDialogProvider } from '@/components/ui/AlertDialog'
import { TooltipProvider } from '@/components/ui/Tooltip'
interface RouterContext {
getTitle?: () => string
}
export const Route = createRootRouteWithContext<RouterContext>()({
component: RootComponent,
})
function RootComponent() {
return (
<NuqsAdapter>
<TooltipProvider>
<Toaster richColors />
<ConfirmDialogProvider />
<Outlet />
</TooltipProvider>
</NuqsAdapter>
)
}
import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
import { NuqsAdapter } from 'nuqs/adapters/tanstack-router'
import { Toaster } from 'sonner'
import { ConfirmDialogProvider } from '@/components/ui/AlertDialog'
import { TooltipProvider } from '@/components/ui/Tooltip'
interface RouterContext {
getTitle?: () => string
}
export const Route = createRootRouteWithContext<RouterContext>()({
component: RootComponent,
})
function RootComponent() {
return (
<NuqsAdapter>
<TooltipProvider>
<Toaster richColors />
<ConfirmDialogProvider />
<Outlet />
</TooltipProvider>
</NuqsAdapter>
)
}
import { Link, useRouterState } from '@tanstack/react-router'
import React from 'react'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/Breadcrumb'
const Breadcrumbs = () => {
const matches = useRouterState({
select: s => s.matches,
})
const breadcrumbs = matches
.filter(match => match.context.getTitle)
.map(({ pathname, context, ...rest }) => {
console.log({
pathname,
context,
})
return {
title: context.getTitle(),
path: pathname,
}
})
return (
<Breadcrumb className='hidden md:flex'>
<BreadcrumbList>
{breadcrumbs.map((breadcrumb, index) => (
<React.Fragment key={breadcrumb.path}>
<BreadcrumbItem>
{index === breadcrumbs.length - 1 ? (
<BreadcrumbPage>
{breadcrumb.title}
</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link to={breadcrumb.path}>
{breadcrumb.title}
</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
{index < breadcrumbs.length - 1 && (
<BreadcrumbSeparator />
)}
</React.Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
)
}
import { Link, useRouterState } from '@tanstack/react-router'
import React from 'react'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/Breadcrumb'
const Breadcrumbs = () => {
const matches = useRouterState({
select: s => s.matches,
})
const breadcrumbs = matches
.filter(match => match.context.getTitle)
.map(({ pathname, context, ...rest }) => {
console.log({
pathname,
context,
})
return {
title: context.getTitle(),
path: pathname,
}
})
return (
<Breadcrumb className='hidden md:flex'>
<BreadcrumbList>
{breadcrumbs.map((breadcrumb, index) => (
<React.Fragment key={breadcrumb.path}>
<BreadcrumbItem>
{index === breadcrumbs.length - 1 ? (
<BreadcrumbPage>
{breadcrumb.title}
</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link to={breadcrumb.path}>
{breadcrumb.title}
</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
{index < breadcrumbs.length - 1 && (
<BreadcrumbSeparator />
)}
</React.Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
)
}
0 Replies