Breadcrumbs（パンくずリスト）を作りながら Remix の useMatches と handle の使い方を学ぶ

はじめに

Remix の公式ドキュメントには Breadcrumbs （パンくずリスト）の作成方法とともに、useMatches および handle の使い方について説明しているページが存在します。
Breadcrumbs（パンくずリスト）を作りながら、useMatches および handle を使う際の注意点を簡単に記載します。

useMatches と handle について

useMatches は、Active な Route の Data や Meta 情報に Access するための hook です。
useMatches を使うことによってデータの共有を実行しやすくなります。

handle は、Root module で任意のデータやロジックを定義するためのプロパティです。
handle を使うことで、各 Route に独自の設定、メタ情報を組み込むことができます。

useMatches と handle を使って breadcrumbs を作成する

Remix を使用して 簡単な Blog を作成していたとします。
それぞれの tsx に下記のような記述をします。

• /blog ... 記事一覧
• /blog/$id ... 記事詳細

routes/blog._index.tsx

export const handle = {
  breadcrumb: () => "Blog Index",
};

routes/blog.$id.tsx

export const handle = {
  breadcrumb: () => "Blog Detail",
};

これらの値を routes/blog.tsx で取得する場合は以下のように記載します。

routes/blog.tsx

export default function Blog() {
  const matches = useMatches();
  const breadcrumbs = matches
    .filter((match) => match.handle && match.handle.breadcrumb)
    .map((match) => (match.handle.breadcrumb(match)))

  return (
    <>
      <div>
        {breadcrumbs.join(" / ")}
      </div>
      <Outlet />
    </>
  );
}

上記のように記載することで、 /blog/$id にアクセスされた場合、
Blog Index / Blog Detail のように表示されるようになります。

また、(当然と言えば当然ですが) 各 tsx ファイルで固定された値を利用したい場合は、 routes/blog.tsx からデータを渡して上げる必要があります。

Ref