react关于手搓antd pro面包屑的经验（写的不好请见谅）

我们先上代码，代码里面都有注释，我是单独写了一个组件，方便使用，在其他页面引入就行了

还使用了官方的Breadcrumb组件

import React, { useEffect, useState } from 'react';
import { Breadcrumb, Button } from 'antd';
import { useLocation, NavLink, useNavigate } from 'react-router-dom';// 定义面包屑项的类型
interface LocaItem {path: string;title: string;
}interface CustomBreadcrumbProps {title: string; // 当前页面的标题，动态传递
}const CustomBreadcrumb: React.FC<CustomBreadcrumbProps> = ({ title }) => {const navigate = useNavigate();const location = useLocation();const [loca, setLoca] = useState<LocaItem[]>([]);useEffect(() => {// 获取存储的面包屑数据const storedLoca = JSON.parse(sessionStorage.getItem('loca') || '[]');// 创建新面包屑项const newObject: LocaItem = {path: location.pathname,title: title, // 使用传入的 title 作为当前页面的标题};// 判断 loca 中是否有相同的 titleconst isExist = storedLoca.some((item: LocaItem) => item.title === newObject.title);// 如果不存在相同的 title，就 push 新对象if (!isExist) {storedLoca.push(newObject);sessionStorage.setItem('loca', JSON.stringify(storedLoca)); // 存储新的面包屑数据}setLoca(storedLoca); // 更新组件状态}, [location.pathname, title]); // 每次路径或标题变化时，更新面包屑// 删除面包屑项const handleRemove = (path: string) => {console.log(location.pathname);console.log(path);// 检查路径是否相同if (location.pathname === path) {const pathlink = JSON.parse(sessionStorage.getItem('loca') || '[]');const pathlinkLength = pathlink.length - 1;if (path === pathlink[pathlinkLength].path) {const newPath = String(pathlink[pathlinkLength - 1]?.path);// 延迟跳转，确保状态更新后执行setTimeout(() => {navigate(newPath || '/'); // 如果路径为空，跳转到默认页面}, 0);} else {const newPath = String(pathlink[pathlinkLength - 2]?.path);// 延迟跳转，确保状态更新后执行setTimeout(() => {navigate(newPath || '/'); // 如果路径为空，跳转到默认页面}, 0);}}// 更新面包屑数据const updatedLoca = loca.filter((item) => item.path !== path);sessionStorage.setItem('loca', JSON.stringify(updatedLoca)); // 更新 sessionStoragesetLoca(updatedLoca); // 更新状态};// 渲染面包屑项const breadcrumbItems = loca.map((item: LocaItem) => ({title: (<span style={{ display: 'flex', alignItems: 'center', marginLeft: '10px' }}><NavLinkto={item.path}style={({ isActive }) => ({fontWeight: isActive ? 'bold' : 'normal', // 高亮显示color: isActive ? '#1890FF' : 'normal', // 当前项文字颜色backgroundColor: isActive ? '#e6f7ff' : 'normal', // 当前项背景颜色borderBottom: isActive ? '1px solid #1890FF' : 'normal',borderRadius: '0',height: '30px',lineHeight: '30px',padding: '0 10px 0 10px',})}>{item.title}</NavLink>{/* 关闭按钮 */}<ButtononClick={() => handleRemove(item.path)} // 点击删除当前面包屑项disabled={item.title === "首页"} // 禁用“首页”按钮type="link"icon={<span style={{ fontSize: '16px' }}>×</span>}style={{padding: 0,fontSize: '16px',display: item.title === "首页" ? 'none' : 'block',width: '20px',margin: item.title === "首页" ? '0 5px 0 0' : '0',}}/></span>),}));return (<Breadcrumbstyle={{margin: '16px 0',height: '30px',}}items={breadcrumbItems} // 使用动态生成的面包屑项separator="" // 去掉默认的斜杠分隔符itemRender={(route) => {return (<span style={{ marginRight: '10px',whiteSpace:'nowrap' }}>{route.title}</span> // 给每个面包屑项加间距);}}/>);
};export default CustomBreadcrumb;

然后在其他页面引入

import Breadcrumbs from '../../../src/components/Breadcrumb/Breadcrumb';

使用：

title是面包屑的名称，你也可以获取当前路由的title，写个动态的

<Breadcrumbs title="需求管理" />

效果：