react+ant design Breadcrumb面包屑组件
import React from 'react';
import { Link }from 'react-router-dom';
import { Breadcrumb } from 'antd'; //具体导航的名称
const breadcrumbNameMap = {
'/user':'用户管理',
'/user/user_info':'用户信息',
'/user/user_info/user_detail':'用户详情',
'/user/user_pool':'用户池',
'/user/user_pool/user_detail':'用户详情',
'/user/my_user':'我的用户',
'/user/my_user/user_detail':'用户详情',
}
export default class NewBreadcrumb extends React.Component {
constructor(props) {
super(props);
this.state={
pathSnippets: null,
extraBreadcrumbItems: null,
}
}
getPath = () => {
//对路径进行切分,存放到this.state.pathSnippets中
this.state.pathSnippets = this.props.pathname.split('/').filter(i => i);
// let arr=this.state.pathSnippets;
// let pathname=this.context.router.history.location.pathname;
//将切分的路径读出来,形成面包屑,存放到this.state.extraBreadcrumbItems
this.state.extraBreadcrumbItems = this.state.pathSnippets.map((_, index) => {
let url = `/${this.state.pathSnippets.slice(0, index + 1).join('/')}`;
return (
<Breadcrumb.Item key={url}>
<Link to={url}>
{breadcrumbNameMap[url]}
</Link>
</Breadcrumb.Item>
);
});
}
componentWillMount() {
this.getPath();
}
render() {
return <Breadcrumb>{this.state.extraBreadcrumbItems}</Breadcrumb>;
}
}
react+ant design Breadcrumb面包屑组件的更多相关文章
- 【angular5项目积累总结】breadcrumb面包屑组件
view code <div class="fxs-breadcrumb-wrapper" aria-label="Navigation history" ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- React + Ant Design网页,配置
第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步: https://blog.csdn.net/u0129070 ...
- woocommerce隐藏breadcrumb面包屑导航
woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcru ...
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- Vue折腾记 - (2)写一个不大靠谱的面包屑组件
先看效果图 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建
首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...
随机推荐
- 题解【洛谷P5767】[NOI1997]最优乘车
题面 一道很经典的最短路模型转换问题. 考虑如何建图. 我们可以发现,对于每一条公交线路,可以将这条线路上 可以到达的两个点 连一条权值为 \(1\) 的边. 获取一条公交线路上的每一个点可以使用读取 ...
- GYCTF ezupload
上传一句话,没有任何过滤 菜刀连接后,读取flag文件 bash -c/readflag >tmp cat tmp 上面是非预期的解法.应该是题出问题了.看了一个师傅的blog,看源码,发现预期 ...
- Qt Installer Framework翻译(7-7)
脚本API 下表总结了可以在控制器和组件脚本中使用的全局JavaScript对象. QMessageBox 提供一个模式对话框,通知用户或询问用户问题并接收答案 buttons 提供可在安装程序页面上 ...
- 对one hot 编码的理解,sklearn. preprocessing.OneHotEncoder()如何进行fit()的?
查阅了很多资料,逐渐知道了one hot 的编码,但是始终没理解sklearn. preprocessing.OneHotEncoder()如何进行fit()的?自己琢磨了一下,后来终于明白是怎么回事 ...
- 前后端分离开发,跨域时jsessionid每次请求都变化的问题解决方法
本解决方法的使用前提是,前端开发使用的是vue,后端使用java(SpringMVC) 在前后端分离开发过程中,可能会出现因跨域而导致每次请求的jsessionid不一致的情况 解决方法: 前端:要在 ...
- Codeforces Round #596 (Div. 2)D.Power Products
题意: 给一个数组,给你一个k,找出两个数字的积可以变成xk的数对对数 解析: 当且仅当,两个数进行质因子分解后每个因子的个数都是k的倍数个就说明这是满足条件的一对,可以让每个因子个数%k用map找对 ...
- 模拟退火SA刷题记录
洛谷P1337 [JSOI2004]平衡点 / 吊打XXX 基本上是照着别人的代码写的,模拟退火为什么一定能找到答案呢...迷惑,,有时间搜一搜证明啥的 sa步骤:这个是要确定一个(xi,yi)使得函 ...
- PIE-SDK For C++栅格数据集的读写
1.功能简介 栅格数据包含很多信息,在数据的运用中需要对数据的信息进行读取或写入,目前PIE SDK支持多种数据格式的数据读取和写入,下面对栅格数据格式的数据读写功能进行介绍. 2.功能实现说明 2. ...
- python 多版本环境
参考 https://www.cnblogs.com/---JoyceLiuHome/articles/7852871.html 安装 Anaconda集成化环境 https://www.anacon ...
- R parallel包学习笔记2
这个部分我在datacamp上面学习笔记,可视化的性能很差,使用的函数也很少. 可以参考一下大佬的博客园个人感觉他们讲的真的很详细 https://cosx.org/2016/09/r-and-par ...