面包屑指南

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

面包屑指南

理解基础知识

为路由定义面包屑

在根路由中聚合面包屑

其他资源