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>; } }