react-数据字典

可实现类似面包屑这样的效果：

技术栈：react / react-router-dom / Antd / react-redux（主要用于存所点击的路由）

需要安装的第三方库以及其他插件

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

封装数据字典文件constants.ts，将面包屑对应的路由匹配上

//数据字典
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

根据路由匹配菜单项：

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

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

将数据字典以及路由转换文件导入主文件里做渲染，keypath是你所点击的菜单的路由，我这里是存在了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;

实现效果：

面包屑

猜你喜欢