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

?

轉載于:https://www.cnblogs.com/xiaojiumei/p/10422806.html

總結

以上是生活随笔為你收集整理的react+ant design Breadcrumb面包屑组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。