React----Antd面包屑的实现代码

配合路由和导航导航菜单实现面包屑，首先要有路由或导航菜单的数据（路由和标题）

可以先对数据进行处理，编程方便遍历的数据JS——数据处理_朝朝忆萍的博客-CSDN博客一个数组的数据是一组对象，对象可能有一个属性是与数组相似的结构要求，把数组中对象中的一个值作为新对象的键，数组中对象的另一个值作为新对象的值，包括嵌套的数组中的对象都放到新对象中https://blog.csdn.net/jddfj/article/details/129208198如果要实现面包屑中要有图标，还要将字符串图标变为组件图标

React将字符串转化成组件，将Antd图标字符串转化为图标组件_朝朝忆萍的博客-CSDN博客

实现面包屑

import React from 'react'
//菜单列表
import MenuList from '../sider/MenuList'
import { Breadcrumb } from 'antd';
import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import { useState } from 'react';
//处理菜单列表的方法
import menuKeyAndLaber from "@/compented/MenuKeyAndLaber"


export default function Breadcrumbsd() {
    // 获取页面路由并集合成数组
    const location = useLocation();
    const pathSnippets = location.pathname.split('/').filter((i) => i);

    // 存放路由和标题对应信息
    const [breadcrumbNameMap, setbreadcrumbNameMap] = useState([])

    //初始化时对菜单列表进行处理
    useEffect(() => {
        setbreadcrumbNameMap(menuKeyAndLaber(MenuList))
    }, [])

    // 根据路由生成面包屑
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        // 根据路由数组循环遍历
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        // console.log(url);
        return (
            <Breadcrumb.Item key={url}>
                <span>{breadcrumbNameMap[url]}</span>
            </Breadcrumb.Item>
        );
    });

    // 面包屑导航主题
    const breadcrumbItems = [
        //固定的首页面包屑，也可以不用
        <Breadcrumb.Item key="home">
            //使用Link标签可以实现跳转
            <span>首页</span>
        </Breadcrumb.Item>,
        ...extraBreadcrumbItems
    ]

    return (
        <div className="breadcrumb">
            <Breadcrumb>{breadcrumbItems}</Breadcrumb>
        </div>
    )
}