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 ...
随机推荐
- STL版本
STL - Standard Template Library , 是C++标准里面规定的模板库接口规范,但它只是接口规范,没有规定具体怎么实现. STL是C++标准的一部分,所以每个C++编译器都会 ...
- 使用git将本地项目上传至git仓库
个人博客 地址:https://www.wenhaofan.com/article/20190508220440 介绍 一般来说开发过程中都是先在git创建远程仓库,然后fetch到本地仓库,再进行c ...
- 0级搭建类006-Oracle Solaris 安装 (10.13) 公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- (一)Python模块化编程简介
1 引言 众所周知,模块化编程具备很多优点,尤其在复杂项目上体现更为明显.Python模块化编程有助于开发者统筹兼顾和分工协作,并提升代码灵活性和可维护性,是编程开发者不可或缺的一项重要工具. 2 P ...
- js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...
- R语言读写数据
R语言读写数据 一般做模型的时候,从外部的excel中读入数据,我现在常用的比较多的是read_csv(file) 读入之前先把excel数据转化成.csv格式 同样的把结果输出来的时候用的是writ ...
- 解决pjax重复绑定
个人博客 地址:http://www.wenhaofan.com/article/20180929002529 1.所有js统一在pjax容器外引入 在pjax容器外引入的js只会被引入一次,所以不会 ...
- jenkins Exec exit status not zero. Status [-1]
jenkins是使用ssh连接服务器后,如果使用grep获取进程并kill时,会jenkins Exec exit status not zero. Status [-1],解决办法:在获取进程时,使 ...
- Java安装及环境配置
一.jdk安装及环境配置 1. 下载jdk 去oracle官网下载,这里使用的jdk版本为 有一个需要注意的问题就是7u71后的jdk有两个版本,奇数版本为无BUG版,偶数版包含奇数版全部内容但是有一 ...
- 重载(Overload)和重写(Override)的区别是什么?
首先java程序的运行分为编译和运行两部分. 所以重载和重写在这一点就有很明显的区别,因为重写方法的方法名和参数个数类型都一样,所以在java虚拟机的编译阶段是识别不出重写的方法的不同,在运行期间才可 ...