パンくずリストガイド

パンくずリスト

Remixでは、ルート階層に基づいて動的なパンくずリストを簡単に構築できます。このガイドでは、useMatchesとhandle機能を使用してこのプロセスを説明します。

基本を理解する

Remixは、Reactエレメントツリーの最上部からすべてのルートマッチと関連データへのアクセスを提供します。これにより、<Meta />、<Links />、<Scripts />などのコンポーネントがネストされたルートから値を取得し、ドキュメントの最上部でレンダリングすることができます。

useMatchesとhandle関数を使用して、同様の戦略を採用できます。ここではパンくずリストに焦点を当てていますが、ここで示す原則は様々なシナリオに適用できます。

ルートのパンくずリストを定義する

まず、ルートのhandleにbreadcrumbプロパティを追加します。このプロパティはRemix固有のものではありません - 好きな名前を付けることができます。この例では、breadcrumbと呼びます。

export const handle = {
  breadcrumb: () => <Link to="/parent">Some Route</Link>,
};

同様に、子ルートのパンくずリストを定義できます：

export const handle = {
  breadcrumb: () => (
    <Link to="/parent/child">Child Route</Link>
  ),
};

ルートルートでパンくずリストを集約する

次に、useMatchesを使用してルートルートですべてを集約します：

import {
  Links,
  Scripts,
  useLoaderData,
  useMatches,
} from "@remix-run/react";

export default function Root() {
  const matches = useMatches();

  return (
    <html lang="en">
      <head>
        <Links />
      </head>
      <body>
        <header>
          <ol>
            {matches
              .filter(
                (match) =>
                  match.handle && match.handle.breadcrumb
              )
              .map((match, index) => (
                <li key={index}>
                  {match.handle.breadcrumb(match)}
                </li>
              ))}
          </ol>
        </header>
        <Outlet />
      </body>
    </html>
  );
}

matchオブジェクトをパンくずリストに渡していることに注目してください。これにより、match.dataを使用してルートのデータに基づいてパンくずリストの内容を強化できます。この例ではそれを使用していませんが、ローダーデータの値をパンくずリストに使用したい場合があるかもしれません。

useMatchesとhandleを組み合わせることで、ルートが実際のレンダリング位置よりも上位のエレメントツリーでのレンダリングに参加できる強力な方法を提供します。

その他のリソース

useMatches - handle