麵包屑指南

在 Remix 中，您可以根據您的路由層次結構輕鬆建構動態麵包屑。本指南將帶您了解使用 useMatches 和 handle 功能的過程。

了解基本概念

Remix 允許在 React 元素樹的頂部存取所有路由匹配和相關資料。這使得諸如 <Meta />、<Links /> 和 <Scripts /> 之類的元件能夠從巢狀路由取得數值，並將它們呈現在文件的頂部。

您可以使用類似的策略，透過 useMatches 和 handle 函數。雖然我們專注於麵包屑，但此處示範的原理適用於各種情況。

定義路由的麵包屑

首先，將 breadcrumb 屬性新增至您路由的 handle。這個屬性並非 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 提供了一種強大的方式，讓路由能夠貢獻給元素樹中高於其實際渲染點的渲染過程。

麵包屑指南

了解基本概念

定義路由的麵包屑

在根路由中聚合麵包屑

其他資源