Tdesign-React 模板面包屑如何放到 Header头部

1、问题点：Tdesign-React 模板面包屑如何放到 Header头部

2、实现效果

3、源代码分析，官方通过路由的方式、为 Page 组件赋值。

4、实现思路，在 AppLayout.tsx 文件中为每个 header 传参 breadcrumbs（面包屑），关键点在于如何取到 breadcrumbs 列表值。

这里我使用 codeBuddy （deepseek-v3），输入需求：

我需要在该文件添加面包屑，帮我改造代码，并引入面包屑 breadcrumbs 值。保持跟 Page.tsx 一样的效果

deepseek-v3 给出的关键代码：

  const location = useLocation()

  const breadcrumbs = getBreadcrumbs(location.pathname);

// 获取当前路径的面包屑
const getBreadcrumbs = (pathname: string): string[] => {
    // console.log('pathname=>',pathname) // /dashboard/base
  const breadcrumbs: string[] = [];
  let currentPath = '';
  // 分割路径
  const pathSegments = pathname.split('/').filter(Boolean);
  // 遍历路径段，构建面包屑
  for (let i = 0; i < pathSegments.length; i++) {
    const segment = pathSegments[i];
    currentPath = currentPath ? `${currentPath}/${segment}` : `/${segment}`;

    // 在路由配置中查找匹配的路由
    const findRouteTitle = (routes: IRouter[], path: string): string | undefined => {
      for (const route of routes) {
        const routePath = resolve(path, route.path);
        if (routePath === currentPath && route.meta?.title) {
          return route.meta.title;
        }
        if (route.children) {
          const childTitle = findRouteTitle(route.children, routePath);
          if (childTitle) return childTitle;
        }
      }
      return undefined;
    };

    const title = findRouteTitle(routers, '') || segment;
    breadcrumbs.push(title);
  }

  return breadcrumbs;
};

这里 useLocation  是 React 的知识点。作用：获取当前路由的 location 对象 返回对象结构：