面包屑指南

在 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 结合使用提供了一种强大的方法，使路由能够为元素树中高于其实际渲染点的渲染过程做出贡献。

面包屑指南

理解基础知识

为路由定义面包屑

在根路由中聚合面包屑

其他资源