react-data-dictionary

An effect similar to breadcrumbs can be achieved:

 Technology stack: react / react-router-dom / Antd / react-redux (mainly used to save the clicked route)

Third-party libraries and other plug-ins that need to be installed

npm install antd --save
npm i react-router-dom

Encapsulate the data dictionary file constants.ts, and match the route corresponding to the breadcrumbs

//数据字典
var obj:any = {
    '/index/home':'首页',
    "swiper":"轮播图管理",
    "/index/swiper":"轮播图列表",
    "/index/swiperadd":"轮播图添加",
    "user":"账号管理",
    "/index/user":"管理员列表",
    "pro":"产品管理",
    "/index/product":"产品列表",
    "/index/miaosha":"秒杀列表",
    "/index/recommend":"推荐列表",
    "/index/search":"筛选列表",
    "echarts":"数据可视化",
    "/index/dataview":"echarts使用",
    "edit":"编辑器",
    "/index/edit":"富文本编辑器",
    "excel":"excel管理",
    "/index/excel":"excel使用",
    "map":"地图管理",
    "/index/map":"百度地图"
}
export default obj

Match menu items against a route:

import mapdata from './constants'//从数据字典所对应的文件中倒入

//根据key换 中文字符串
export function getText(key:string){
    return mapdata[key]
}

Import the data dictionary and route conversion file into the main file for rendering. The keypath is the route of the menu you clicked. Here I have it in redux

function MyBread(props:Props) {
    //取出store中的keyPath
    var keyPath = useSelector((state:any)=>state.keyPath);
    return (
        <div className='my-bread'>
              <Breadcrumb>
                <Breadcrumb.Item href="">
                    首页
                </Breadcrumb.Item>
                {
                    keyPath.reverse().map((item:any,index:any)=>{
                        return (
                            <Breadcrumb.Item key={index}>
                                <span> { getText(item) } </span>
                            </Breadcrumb.Item>
                        )
                    })
                }
            </Breadcrumb>
        </div>
    );
}
export default MyBread;

 Realize the effect:

Bread crumbs