react-location breadcrumbs

breadcrumbs.tsx

import {MakeGenerics, Route} from 'react-location'

type LocationGenerics = MakeGenerics<{
  Params: {
    teamId: string
  }
  RouteMeta: {
    breadcrumb: (params: LocationGenerics['Params']) => React.ReactElement
  }
}>

const routes: Route<LocationGenerics>[] = [
  {
    path: '/',
    element: <Home />,
  },
  {
    path: 'teams',
    element: <Teams />,
    meta: {
      breadcrumb: () => 'Teams',
    },
    children: [
      {
        path: ':teamId',
        element: <Team />,
        meta: {
          breadcrumb: (params) => <TeamBreadcrumb teamId={params.teamId} />,
        },
      },
    ],
  },
]

function TeamBreadcrumb({teamId}: {teamId: string}) {
  // get the team data using your favorite lib
  const team = useTeam()
  return <>{team.name}</>
}

function Breadcrumbs() {
  const {params} = useMatch<LocationGenerics>()
  const matches = useMatches<LocationGenerics>()

  return (
    <nav>
      <ol>
        {matches
          .filter((match) => match.route.meta?.breadcrumb)
          .map((match) => (
            <li key={match.pathname}>
              <Link to={match.pathname}>{match.route.meta!.breadcrumb(match.params)}</Link>
            </li>
          ))}
      </ol>
    </nav>
  )
}