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/baseconst 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 对象 返回对象结构：