Breadcrumbs: Prevent Router Context From Being Inherited

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>
    )
}