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. java 8 supplier object区别

    起初用supplier的时候,发现用法和object一样呀,只是一个用于生产object工厂方法而已,为什么要新引起这样一个对象呢. 后面查到这篇英语文档,才发现,相比object有如下三个用法: ( ...

  2. 使用word时在方块中打钩

    ☑ 方法一: 第一步: 输入:2611 第二步: 选中2611 第三步: 按Alt + X Get :  ☑ 同样:用2610代替2611会得到☐ ☐2610 ☑2611 方法二 1.选择[插入]-- ...

  3. early-stopping的使用

    early-stopping的使用 待办 https://blog.csdn.net/qq_37430422/article/details/103638681 github对应类导入,直接放在项目更 ...

  4. docker-储存持久化

    docker容器不适合存放数据,重要的数据要用外部卷存储,容器可以挂载真实机目录或者共享存储为卷 储存卷映射 docker run -itd -v 真实机目录:容器目录 镜像:标签 可以做一台nfs服 ...

  5. phpstorm格式化数组

    如果我们想要的这样的数组格式的话,可以设置 <?php $arr = array["a" => 0, "b" => 1, "c&qu ...

  6. js监听页面copy事件添加版权信息

    个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...

  7. 理解 Oracle 多租户体系中(12c,18c,19c)Revoke 回收权限作用域范围

    本篇探讨以下几个问题:你可提前猜测下面6个场景语句中,哪几个回收可以成功执行? 1. 在CDB级别中对用户进行权限回收,不带 container 子句的效果: 2. 在CDB级别中对用户进行权限回收, ...

  8. 2020牛客寒假算法基础集训营1 J. 缪斯的影响力 (矩阵快速幂/费马小定理降幂)

    https://ac.nowcoder.com/acm/problem/200658 f(n) = f(n-1) * f(n-2) * ab ,f的第一项是x,第二项是y. 试着推出第三项是x·y·a ...

  9. BFS-八数码问题与状态图搜索

    在一个3*3的棋盘上放置编号为1~8的八个方块,每个占一格,另外还有一个空格.与空格相邻的数字方块可以移动到空格里.任务1:指定的初始棋局和目标棋局,计算出最少的移动步数:任务2:数出数码的移动序列. ...

  10. c++踩坑大法好 typedef和模板

    1,typedef字面意思,自定义一种数据类型 语法:typedef 类型名称 类型标识符; 基本用法: 1) 为基本数据类型定义新的类型名. 2) 为自定义数据类型(结构体.公用体和枚举类型)定义简 ...