Bread Crumbs

Leveraging route.meta

We can store anything in route.meta - including components! We can set a breadcrumb function that would render a Link for each route.

1 type LocationGenerics = MakeGenerics<{
2   Params: {
3     teamId: string
4   },
5   RouteMeta: {
6     breadcrumb: (params: LocationGenerics['Params']) => React.ReactElement
7   }
8 }>
9 
10 const routes: Route<LocationGenerics>[] = [
11   {
12     path: '/',
13     element: <Home />,
14   },
15   {
16     path: 'teams',
17     element: <Teams />,
18     meta: {
19       breadcrumb: () => 'Teams'
20     },
21     children: [
22       {
23         path: ':teamId',
24         element: <Team />,
25         meta: {
26           breadcrumb: (params) => params.teamId
27         }
28       }
29     ]
30   }
31 ];

We can access this meta property from a route match. We will use the useMatches hook to get access to all route matches and render a list of breadcrumbs.

1 function Breadcrumbs() {
2   const matches = useMatches()
3 
4   return (
5     <ol>
6       {matches
7         // skip routes that don't have a breadcrumb, like is the case of our '/' route 
8         .filter(match => match.route.meta?.breadcrumb)
9         .map(match => (
10           <li key={match.pathname}>
11             <Link to={match.pathname}>
12               {match.route.meta!.breadcrumb(match.params)}
13             </Link>
14           </li>
15         ))
16       }
17     </ol>
18   )
19 }

Since our breadcrumbs are components, we can use the match data and render something a little bit more intuitive than just the team's ID.

1 // we can fetch the team and render the team name instead
2 function TeamBreadcrumb({ teamId }: { teamId: string }) {
3   const team = useTeam(teamId)
4   return <>{team?.name}</>
5 }
6 
7 const routes = [
8   // ...
9       {
10         path: ':teamId',
11         element: <Team />,
12         meta: {
13           breadcrumb: ({teamId}) => <TeamBreadcrumb teamId={teamId} />
14         }
15       }
16 ]