react+antdesign实现后台管理系统面包屑

andDesign面包屑组件，实现这个功能主要是当我点击对应目录下的子菜单使用递归获取当前叶子节点的最高父节点拿到整个对象塞到集合中去

创建 Breadcrumb组件

import { Breadcrumb } from 'antd';
import { routes } from '@/router/routes';
import { useLocation } from'react-router-dom';
import { getBreadcrumbList } from '@/utils';
const BreadcrumbNav = () => {const location = useLocation();const items = getBreadcrumbList(routes, location.pathname);const breadcrumbItems = items.map(item => {const childrenMenu = item.children?.map(child => ({key: child.path,label: <a href={`#${child.path}`}>{child.meta.title}</a>})) || [];return {title: (<span> {item?.meta?.title}</span>),menu: childrenMenu.length > 0 ? { items: childrenMenu } : undefined};});return (<Breadcrumbitems={[{title: <a href="#/">首页</a>},...breadcrumbItems]}/>)
};export default BreadcrumbNav;

utils文件

export const searchRoute = (path: string, routes: RouteObject[] = []): RouteObject => {let result: RouteObject = {};for (const item of routes) {if (item.path === path) return item;if (item.children) {const res = searchRoute(path, item.children);if (Object.keys(res).length) result = res;}}return result;
};export const getBreadcrumbList = (routes: RouteObject[] = [], currentPath: string) => {if(!currentPath || currentPath === '/') return [];const currentParent = findBreadcrumb(routes, currentPath)const current = searchRoute(currentPath, routes)return [currentParent,current]
}
export const findBreadcrumb = (routes: RouteObject[] = [], targetPath: string): any => {// 用于存储找到的最外层父节点let outermostParent = null;// 递归遍历路由配置的函数function traverse(nodes, currentParent?: any) {for (const node of nodes) {// 如果当前节点有子节点，继续递归遍历if (node.children && node.children.length > 0) {// 检查当前节点的子节点中是否包含目标路径const hasTarget = node.children.some(child => child.path === targetPath);// 如果找到目标路径，记录当前节点作为父节点if (hasTarget) {// 最外层父节点是首次找到的包含目标路径的祖先节点if (!outermostParent) {outermostParent = node;}} else {// 否则继续深入查找，当前节点作为临时父节点traverse(node.children, node);}}}}// 从根节点开始遍历traverse(routes, null);return outermostParent;
};