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="需求管理" />效果：
相关文章：
react关于手搓antd pro面包屑的经验（写的不好请见谅）
我们先上代码，代码里面都有注释，我是单独写了一个组件，方便使用，在其他页面引入就行了 还使用了官方的Breadcrumb组件 import React, { useEffect, useState } from react; import { Breadcrumb, Button } from antd; import { …...
PHP-运算符
[题目信息]： 题目名称题目难度PHP-运算符2 [题目考点]： PHP运算符优先级[Flag格式]: SangFor{zEk4r_djfgy0CibPz6LdXpwBrXRckhIT}[环境部署]： docker-compose.yml文件或者docker tar原始文件。 http://分配ip:2067[题目writeup]&#x…...
chrome浏览器chromedriver下载
chromedriver 下载地址 https://googlechromelabs.github.io/chrome-for-testing/ 上面的链接有和当前发布的chrome浏览器版本相近的chromedriver 实际使用感受 chrome浏览器会自动更新，可以去下载最新的chromedriver使用，自动化中使用新的chromedr…...
BurpSuite抓包与HTTP基础
文章目录 前言一、BurpSuite1.BurpSuite简介2.BurpSuite安装教程(1)BurpSuite安装与激活(2)安装 https 证书 3.BurpSuite使用4.BurpSuite资料 二、图解HTTP1.HTTP基础知识2.HTTP客户端请求消息3.HTTP服务端响应消息4.HTTP部分请求方法理解5.HTTPS与HTTP 总结 前言 在网络安全和…...
SQLAlchemy 2.0的简单使用教程
SQLAlchemy 2.0相比1.x进行了很大的更新，目前网上的教程不多，以下以链接mysql为例介绍一下基本的使用方法 环境及依赖 Python:3.8 mysql:8.3 Flask:3.0.3 SQLAlchemy:2.0.37 PyMySQL:1.1.1使用步骤 1、创建引擎，链接到mysql engine crea…...
Android原生开发问题汇总
Fragment顶部出现一个白条怎么办？父类布局搞事情。 layer-list被拉伸问题 Android之 ImageView android:src和tools:src的区别是什么? Android运行时权限的总结，以及EasyPermissions框架的使用 Android Studio添加EasyPemissions Android中module怎…...
springboot中使用注解实现分布式锁
下面将详细介绍如何在 Spring Boot 里借助注解实现分布式锁，以login_lock:作为锁的 key 前缀，使用请求参数里的phone值作为 key，等待时间设为 0 秒，锁的持续时间为 10 秒。我们会使用 Redis 来实现分布式锁，同时借助 S…...
Android TabLayout 使用进阶（含源码）
android:layout_height“match_parent” android:orientation“vertical” tools:context“.mode2.ClassificationActivity”> <com.google.android.material.tabs.TabLayout android:id“id/tab_layout” android:layout_width“match_parent” android:layout_he…...
数据库系统概论的第六版与第五版的区别，附pdf
我用夸克网盘分享了「数据库系统概论第五六版资源」，点击链接即可保存。 链接：https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容 为了保持科学性、先进性和实用性，在第5版教材基础上对全书内容进行了修改、更新和充实。 在科…...
管理etcd的存储空间配额
如何管理etcd的存储空间配额 - 防止集群存储耗尽指南 本文基于etcd v3.4官方文档编写 为什么需要空间配额？ 在分布式系统中，etcd作为可靠的键值存储，很容易成为系统瓶颈。当遇到以下情况时： 应用程序频繁写入大量数据未及时清理…...
深入浅出 NRM：加速你的 npm 包管理之旅
文章目录 前言一、NRM 是什么？二、为什么需要 NRM？三、NRM 的优势四、NRM 的安装与使用4.1 安装 NRM4.2 查看可用的 npm 源4.3 切换 npm 源4.4 测试 npm 源速度4.5 添加自定义 npm 源4.6 删除 npm 源 五、NRM 的进阶使用六、总结 前言 作为一名 JavaScr…...
ESP32开发学习记录---》GPIO
she 2025年2月5日，新年后决定开始充电提升自己，故作此记,以前没有使用过IDF开发ESP32因此新年学习一下ESP32。 ESPIDF开发环境配置网上已经有很多的资料了，我就不再赘述，我这里只是对我的学习经历的一些记录。 首先学习一个…...
stm32点灯 GPIO的输出模式
目录 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置（ 默认不变）HSI 高速内部时钟8Mhz 5.项目配置 6.代码 延时1s循环LED亮灭 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置（ 默认不变）…...
[paddle] 矩阵的分解
特征值 设 A A A 是一个 n n n \times n nn 的方阵， λ \lambda λ 是一个标量， v \mathbf{v} v 是一个非零向量。如果满足以下方程： A v λ v A\mathbf{v} \lambda\mathbf{v} Avλv 则称 λ \lambda λ 为矩阵 A A A 的一个 特征值…...
【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料
🧸安清h：个人主页 🎥个人专栏：【Spring篇】【计算机网络】【Mybatis篇】 🚦作者简介：一个有趣爱睡觉的intp，期待和更多人分享自己所学知识的真诚大学生。 目录 🎃1.修改密码 -持久…...
【深度学习】DataLoader自定义数据集制作
第一步 导包 import os import matplotlib.pyplot as plt %matplotlib inline import numpy as np import torch from torch import nn import torch.optim as optim import torchvision from torchvision import transforms,models,datasets import imageio import time impo…...
【Elasticsearch】Geo-distance聚合
geo_distance聚合的形状是圆形。它基于一个中心点（origin）和一系列距离范围来计算每个文档与中心点的距离，并将文档分配到相应的距离范围内。这种聚合方式本质上是以中心点为圆心，以指定的距离范围为半径的圆形区域来划分数据。 为…...
【R语言】apply函数族
在R语言中使用循环操作时是使用自身来实现的，效率较低。所以R语言有一个符合其统计语言出身的特点：向量化。R语言中的向量化运用了底层的C语言，而C语言的效率比高层的R语言的效率高。 apply函数族主要是为了解决数据向量化运算的问题&#x…...
Vue - shallowRef 和 shallowReactive
一、shallowRef 和 shallowReactive （一）shallowRef 在 Vue 3 中，shallowRef 是一个用于创建响应式引用的 API，它与 ref 相似，但它只会使引用的基本类型（如对象、数组等）表现为响应式…...
双目标定与生成深度图
基于C#联合Halcon实现双目标定整体效果 一，标定 1，标定前准备工作 （获取描述文件与获取相机参数） 针对标准标定板可以直接调用官方提供描述文件，也可以自己生成描述文件后用PS文件打印 2，相机标定 &…...
实名制-网络平台集成身份证实名认证接口/身份证查询-PHP
在当今数字化快速发展的时代，线上平台的安全性和用户体验成为了衡量其成功与否的关键因素。其中，身份证实名认证接口的集成显得尤为重要，它不仅为用户提供了更加安全、可靠的网络环境，同时也增强了平台的信任度和合规性。 对于任…...
全面解析机器学习优化算法中的进化策略
全面解析机器学习优化算法中的进化策略 全面解析机器学习优化算法中的进化策略引言什么是进化策略？基本概念核心组件算法流程数学基础高斯扰动期望值更新与其他优化方法的比较梯度下降法（Gradient Descent, GD）遗传算法（Genetic Algorithm, GA）Python案例基本实现改进版：…...
go数据结构学习笔记
本博文较为完整的实现了go的链表、栈，队列，树，排序，链表包括顺序链表，双向链表，循环链表，队列是循环队列，排序包含冒牌、选择 1.链表 1.1 顺序链表 type LNode struct {data intn…...
【深度学习】DeepSeek模型介绍与部署
原文链接：DeepSeek-V3 1. 介绍 DeepSeek-V3，一个强大的混合专家 (MoE) 语言模型，拥有 671B 总参数，其中每个 token 激活 37B 参数。 为了实现高效推理和成本效益的训练，DeepSeek-V3 采用了多头潜在注意力 (MLA) 和 De…...
使用SpringBoot发送邮件|解决了部署时连接超时的bug|网易163|2025
使用SpringBoot发送邮件 文章目录 使用SpringBoot发送邮件1. 获取网易邮箱服务的授权码2. 初始化项目maven部分web部分 3. 发送邮件填写配置EmailSendService [已解决]部署时连接超时附：Docker脚本Dockerfile创建镜像启动容器 1. 获取网易邮箱服务的授权码 温馨提示…...
【工具篇】深度揭秘 Midjourney：开启 AI 图像创作新时代
家人们，今天咱必须好好唠唠 Midjourney 这个在 AI 图像生成领域超火的工具！现在 AI 技术发展得那叫一个快，各种工具层出不穷，Midjourney 绝对是其中的明星产品。不管你是专业的设计师、插画师，还是像咱这种对艺术创作有点小兴趣的小白，Midjourney 都能给你带来超多惊喜，…...
构成正方形的数量：算法深度剖析与实践
目录 引言算法核心概念 定义正方形的构成条件数据结构与输入形式算法数学原理 几何关系的数学表达坐标运算与判定逻辑Python 实现 代码展示代码解析Python 实现的优势与局限C 语言实现 代码展示代码解析C 语言实现的性能特点性能分析与优化 性能分析 时间复杂度空间复杂度优化思…...
)
Spring设计模式（9种）(详细篇)
总体分为三大类： 创建型模式：工厂方法模式、单例模式。 结构型模式：适配器模式、代理模式、装饰器模式。 行为型模式：观察者模式、策略模式、模板方法模式。 一、简单工厂模式（Simple Factory） 概述&…...
使用Express.js和SQLite3构建简单TODO应用的后端API
使用Express.js和SQLite3构建简单TODO应用的后端API 引言环境准备代码解析1. 导入必要的模块2. 创建Express应用实例3. 设置数据库连接4. 初始化数据库表5. 配置中间件6. 定义数据接口7. 定义路由7.1 获取所有TODO项7.2 创建TODO项7.3 更新TODO项7.4 删除TODO项 8. 启动服务器 …...
2025年2月6日（anaconda cuda 学习 基本命令）
查看电脑的显卡型号是否支持CUDA的安装 https://developer.nvidia.com/zh-cn/cuda-gpus 查看可以安装的CUDA版本 https://docs.nvidia.com/cuda/cuda-toolkit-release-notes/index.html CUDA安装地址 https://developer.nvidia.com/cuda-toolkit-archive Anaconda下载地址 htt…...
大数据方向知识图谱及发展前景分析
目录 一、知识体系 二、大数据领域前景分析： 1. 市场需求 2. 技术趋势 3. 职业发展路径 4. 学习路线建议 5. 推荐认证体系 一、知识体系 大数据知识体系 ├── 基础理论 │ ├── 数学基础：概率统计、线性代数、离散数学 │ ├── 计算机基…...
Docker深度解析：安装各大环境
安装 Nginx 实现负载均衡： 挂载 nginx html 文件： 创建过载目录： mkdir -p /data/nginx/{conf,conf.d,html,logs} 注意：在挂载前需要对 conf/nginx.conf 文件进行编写 worker_processes 1;events {worker_connections 1024; …...
Verilog语言学习总结
Verilog语言学习！ 目录 文章目录 前言 一、Verilog语言是什么？ 1.1 Verilog简介 1.2 Verilog 和 C 的区别 1.3 Verilog 学习 二、Verilog基础知识 2.1 Verilog 的逻辑值 2.2 数字进制 2.3 Verilog标识符 2.4 Verilog 的数据类型 2.4.1 寄存器类型 2.4.2 …...
K8S Deployment 实现 蓝绿 发布
一、何为蓝绿发布 蓝绿发布（Blue - Green Deployment）是一种软件部署策略，旨在最大程度减少应用程序停机时间，确保新老版本系统平稳过渡。以下为详细介绍： 1.1、基本概念 存在两个完全相同的生产环境，通…...
2025新鲜出炉--前端面试题（一）
文章目录 1. vue3有用过吗, 和vue2之间有哪些区别2. vue-router有几种路由, 分别怎么实现3. webpack和rollup这两个什么区别, 你会怎么选择4. 你能简单介绍一下webpack项目的构建流程吗5. webpack平时有手写过loader和plugin吗6. webpack这块你平时做过哪些优化吗？7…...
【ArcGIS Pro 简介1】
ArcGIS Pro 是由 Esri （Environmental Systems Research Institute）公司开发的下一代桌面地理信息系统（GIS）软件，是传统 ArcMap 的现代化替代产品。它结合了强大的空间分析能力、直观的用户界面和先进的三维可视化技术…...
CentOS 6.5编译Rsyslog 8.1903.0
个人博客地址：CentOS 6.5编译Rsyslog 8.1903.0 | 一张假钞的真实世界 个人很早之前的博文，迁移至此作为历史记录。 源码下载参考我的另外一片博文：CentOS 7.3 编译 Rsyslog 8.1903.0。 本篇博文从创建构建环境开始填坑/(ㄒoㄒ)/~~。通过上…...
SQLAlchemy-2.0中模型定义和alembic的数据库迁移工具
SQLAlchemy-2.0中模型定义和alembic的数据库迁移工具 一、SQLAIchemy的介绍二、数据库引擎1、支持的数据库1.1、sqlite数据库1.2、MySQL数据库1.3、数据库引擎的参数 三、定义模型类1、定义模型2、engine负责数据库迁移 四、alembic数据库迁移⼯具1、安装alembic2、初始化alemb…...
打印A4半张纸方法)
两种文件类型(pdf/图片)打印A4半张纸方法
环境:windows10、Adobe Reader XI v11.0.23 Pdf: 1.把内容由横排变为纵排： 2.点击打印按钮： 3.选择打印页范围和多页： 4.内容打印在纸张上部 图片： 1.右键图片点击打印： 2.选择打印类型： 3.打印配置&am…...
【React】合成事件语法
React 合成事件是 React 为了处理浏览器之间的事件差异而提供的一种跨浏览器的事件系统。它封装了原生的 DOM 事件，提供了一致的事件处理机制。 合成事件与原生事件的区别： 合成事件是 React 自己实现的，封装了原生事件。合成事件依然可以通…...
深入解析：如何利用 Python 爬虫获取商品 SKU 详细信息
在电商领域，SKU（Stock Keeping Unit，库存单位）详细信息是电商运营的核心数据之一。它不仅包含了商品的规格、价格、库存等关键信息，还直接影响到库存管理、价格策略和市场分析等多个方面。本文将详细介绍如何利用 Pyth…...
)
Unity 加载OSGB(webgl直接加载，无需转换格式！)
Unity webgl加载倾斜摄影数据 前言效果图后续不足 前言 Unity加载倾斜摄影数据，有很多的插件方便好用，但是发布到网页端均失败，因为webgl 的限制，IO读取失效。 前不久发现一个开源项目: UnityOSGB-main 通过两种方式在 Unity 中…...
Maven架构项目管理工具
1.1什么是Maven 翻译为“专家”，“内行”Maven是跨平台的项目管理工具。主要服务于基于Java平台的项目构建，依赖管理和项目信息管理。什么是理想的项目构建？ 高度自动化，跨平台，可重用的组件，标准化的 什么…...
【漫画机器学习】083.安斯库姆四重奏（Anscombe‘s Quartet）
安斯库姆四重奏（Anscombes Quartet） 1. 什么是安斯库姆四重奏？ 安斯库姆四重奏（Anscombes Quartet）是一组由统计学家弗朗西斯安斯库姆（Francis Anscombe） 在 1973 年 提出的 四组数据集。它们…...
【梦想终会实现】Linux驱动学习5
加油加油坚持住！ 1、 Linux驱动模型：驱动模型即将各模型中共有的部分抽象成C结构体。Linux2.4版本前无驱动模型的概念，每个驱动写的代码因人而异，随后为规范书写方式，发明了驱动模型，即提取公共信息组成一…...
QT修仙之路1-1--遇见QT
文章目录 遇见QT二、QT概述2.1 定义与功能2.2 跨平台特性2.3 优点汇总 三、软件安装四、QT工具介绍(重要)4.1 Assistant4.2 Designer4.3 uic.exe4.4 moc.exe4.5 rcc.exe4.6 qmake4.7 QTcreater 五、QT工程项目解析(作业)5.1 配置文件（.pro）5.2 头文件&am…...
【实战篇】Android安卓本地离线实现视频检测人脸
实战篇Android安卓本地离线实现视频检测人脸 引言项目概述核心代码类介绍人脸检测流程项目地址总结 引言 在当今数字化时代，人脸识别技术已经广泛应用于各个领域，如安防监控、门禁系统、移动支付等。本文将以第三视角详细讲解如何基于bifan-wei-Face/De…...
【图像处理】- 基本图像操作
基本图像操作详解 基本图像操作是图像处理的基础，涵盖了对图像进行简单但重要的变换。以下是几种常见的基本图像操作及其详细说明： 1. 裁剪 (Cropping) 描述：从原始图像中提取一个矩形区域。 实现方法： 使用图像的坐标系指定…...
代码随想录算法训练营| 二叉树总结
代码随想录 二叉树的理论基础：二叉树种类、存储方式、遍历方式、定义方式 二叉树遍历：深度优先和广度优先 二叉树属性：对称、深度、节点、平衡、路径、回溯 修改与构造：反转、构造、合并 涉及到二叉树的构造，无论普…...
Sentinel的安装和做限流的使用
一、安装 Release v1.8.3 alibaba/Sentinel GitHubA powerful flow control component enabling reliability, resilience and monitoring for microservices. (面向云原生微服务的高可用流控防护组件) - Release v1.8.3 alibaba/Sentinelhttps://github.com/alibaba/Senti…...