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面包屑组件的更多相关文章

  1. 【angular5项目积累总结】breadcrumb面包屑组件

    view code <div class="fxs-breadcrumb-wrapper" aria-label="Navigation history" ...

  2. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  3. React + Ant Design网页,配置

    第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步:  https://blog.csdn.net/u0129070 ...

  4. woocommerce隐藏breadcrumb面包屑导航

    woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcru ...

  5. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  6. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  7. Vue折腾记 - (2)写一个不大靠谱的面包屑组件

    先看效果图 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个 ...

  8. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  9. (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

随机推荐

  1. 修改testlink上传文件大小

    大家在使用testlink导入测试时,可能会遇到由于上传的文件太大,而不能上传的现象.当然建议大家在导入用例或者上传文件时,不要上传过大的文件,因为这样的速度确实非常慢.可是由于特殊的原因我们必须要导 ...

  2. 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

  3. npx是什么

    npx是一个执行npm软件包的二进制文件,通俗的讲,他可以执行npm的一些指令 在npm>5.2.0 的时候npm里面就集成了npx 比如npx webpack 他会执行node_modules ...

  4. ubuntu更改mysql配置文件,使其产生日志文件mysql.log

    1.打开mysql配置文件,将68,69行的注释取消掉,保存关闭 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 2.重启mysql服务 sudo servic ...

  5. jQuery---scrollTop和scrollLeft的方法

    scrollTop和scrollLeft的方法 <script src="jquery-1.12.4.js"></script> <script> ...

  6. asp.net web core 开发问题汇总(1)

    1   ASP.NET Core 设置默认静态起始页 转载地址:ASP.NET Core 设置默认起始页(如default.html) 注:1  默认情况下ASP.NET Core应用程序时不支持静态 ...

  7. Selenium3+python自动化006+自动化测试概述

    自动化测试概述 1.自动化分类: (1)单元测试自动化: 单元测试(Unit):模拟各种异常场景,外部依赖较少,且可以做测试单元到最小的一种测试方法. Java单元测试框架Junit.TestNG; ...

  8. 【做题笔记】洛谷P1506 拯救oibh总部

    跑一遍染色法,最后判断哪些位置没被染色即可 一些技巧: 为了判断方便,把字符转换成 int 型的数字. 注意边界问题 详细解释见代码 #include <iostream> #includ ...

  9. 条件锁Condition

    """设计场景:timo先说一句,亚索再说一句timo: timo队长正在待命yasuo: 面对疾风吧timo: timo整装待发yasuo: 哈杀gay "& ...

  10. c++踩坑大法好 赋值和指针的区别

    1,先说结论: 两个指针指向同一个结构,一个改了结构,另一个也会改掉. 两个指针指向同一个结构,修改了其中一个的指向,并且改了其中的内容,另一个不为所动. 2,看例子 main.cpp #includ ...