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