React Routerで、パンくずリストを作る方法

export const routes: RouteObject[] = [
  {
    path: '/',
    element: <Layout />,
    handle: breadcrumb(() => 'ホーム'),
    children: [
      { index: true, element: <Link to="cats">猫の一覧へ</Link> },
      {
        path: 'cats',
        handle: breadcrumb(() => '猫の一覧'),
        children: [
          { index: true, loader: catsLoader, element: <CatList /> },
          {
            id: 'cat',
            path: ':catId',
            loader: catLoader,
            handle: breadcrumb<Cat>((cat) => cat?.name ?? '見つからない猫'),
            errorElement: <CatError />,
            children: [
              { index: true, element: <CatPage /> },
              { path: 'meals', handle: breadcrumb(() => 'ごはんの記録'), element: <Meals /> },
            ],
          },
        ],
      },
    ],
  },
];

async function catLoader({ params }: LoaderFunctionArgs) {
  const cat = await getCat(params.catId ?? '');
  if (!cat) throw data('猫が見つかりません', { status: 404 });
  return cat;
}

import { Link, useMatches, type UIMatch } from 'react-router';

export type BreadcrumbHandle = {
  breadcrumb: (match: UIMatch) => string;
};

// ルートの handle に置く。data は、そのルートの loader が返した値
export function breadcrumb<Data = unknown>(label: (data: Data | undefined) => string): BreadcrumbHandle {
  return { breadcrumb: (match) => label(match.loaderData as Data | undefined) };
}

function hasBreadcrumb(match: UIMatch): match is UIMatch<unknown, BreadcrumbHandle> {
  const handle = match.handle as Partial<BreadcrumbHandle> | undefined;
  return typeof handle?.breadcrumb === 'function';
}

export function Breadcrumbs() {
  const matches = useMatches().filter(hasBreadcrumb);

  return (
    <nav aria-label="パンくずリスト" className="breadcrumbs">
      <ol>
        {matches.map((match, i) => {
          const label = match.handle.breadcrumb(match);
          const isCurrent = i === matches.length - 1;
          return (
            <li key={match.id}>
              {isCurrent ? (
                <span aria-current="page">{label}</span>
              ) : (
                <Link to={match.pathname}>{label}</Link>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export function Layout() {
  return (
    <>
      <header>
        <Breadcrumbs />
      </header>
      <main>
        <Outlet />
      </main>
    </>
  );
}

## /cats/1/meals
  id=0 pathname=/ breadcrumb=true loaderData=undefined
  id=0-1 pathname=/cats breadcrumb=true loaderData=undefined
  id=cat pathname=/cats/1 breadcrumb=true loaderData={"id":"1","name":"たま"}
  id=0-1-1-1 pathname=/cats/1/meals breadcrumb=true loaderData=undefined
  パンくず: ホーム(/) › 猫の一覧(/cats) › たま(/cats/1) › ごはんの記録[aria-current=page]

## /cats
  id=0 pathname=/ breadcrumb=true loaderData=undefined
  id=0-1 pathname=/cats breadcrumb=true loaderData=undefined
  id=0-1-0 pathname=/cats/ breadcrumb=false loaderData=[{"id":"1","name":"たま"},{"id":"2","name":"みけ"}]
  パンくず: ホーム(/) › 猫の一覧[aria-current=page]

// loader は親の :catId のルートにあるので、ルートの id を指定して受け取る
function CatPage() {
  const cat = useRouteLoaderData<typeof catLoader>('cat')!;
  return (
    <>
      <h1>{cat.name}のページ</h1>
      <Link to="meals">ごはんの記録を見る</Link>
    </>
  );
}

   51ミリ秒後 URL=/cats パンくず: ホーム(/) › 猫の一覧[aria-current=page]
  151ミリ秒後 URL=/cats パンくず: ホーム(/) › 猫の一覧[aria-current=page]
  250ミリ秒後 URL=/cats パンくず: ホーム(/) › 猫の一覧[aria-current=page]
  401ミリ秒後 URL=/cats/1 パンくず: ホーム(/) › 猫の一覧(/cats) › たま[aria-current=page]

## /cats/999
  id=0 pathname=/ breadcrumb=true loaderData=undefined
  id=0-1 pathname=/cats breadcrumb=true loaderData=undefined
  id=cat pathname=/cats/999 breadcrumb=true loaderData=undefined
  id=0-1-1-0 pathname=/cats/999/ breadcrumb=false loaderData=undefined
  パンくず: ホーム(/) › 猫の一覧(/cats) › 見つからない猫[aria-current=page]
  エラー表示: 404：猫が見つかりません

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›" / ""; margin-right: 4px; color: #9aa5ab; }

- navigation "パンくずリスト":
  - list:
    - listitem:
      - link "ホーム":
        - /url: /
    - listitem:
      - link "猫の一覧":
        - /url: /cats
    - listitem:
      - link "たま":
        - /url: /cats/1
    - listitem: ごはんの記録

    - listitem:
      - text: ›
      - link "猫の一覧":
        - /url: /cats
    - listitem:
      - text: ›
      - link "たま":
        - /url: /cats/1
    - listitem: ›ごはんの記録