云主机怎么安装网站,跟做网站的人谈什么,网站制作的目的,火车头采集器发布wordpress我们先上代码#xff0c;代码里面都有注释#xff0c;我是单独写了一个组件#xff0c;方便使用#xff0c;在其他页面引入就行了
还使用了官方的Breadcrumb组件
import React, { useEffect, useState } from react;
import { Breadcrumb, Button } from antd;
import { …我们先上代码代码里面都有注释我是单独写了一个组件方便使用在其他页面引入就行了
还使用了官方的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.FCCustomBreadcrumbProps ({ title }) {const navigate useNavigate();const location useLocation();const [loca, setLoca] useStateLocaItem[]([]);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 首页} // 禁用“首页”按钮typelinkicon{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需求管理 /
效果
