Breadcrumbs Guide

面包屑导航

在 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 结合使用，为路由提供了一种强大的方法，使其能够参与元素树中比其实际渲染点更高位置的渲染过程。

其他资源

useMatches - handle