面包屑
import React, { Component } from "react";
import { Breadcrumb } from "antd";
import { withRouter, Link } from "react-router-dom";
class BreadcrumbList extends Component {
state = {
breadcrumbNameMap: {
"/category": "品类管理",
"/product": "产品管理",
},
};
breadcrumbProps = () => {
const { breadcrumbNameMap } = this.state;
const { location } = this.props;
const pathSnippets = location.pathname.split("/").filter((i) => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
return (
<Breadcrumb.Item key={url}>
<Link to={url}>{breadcrumbNameMap[url]}</Link>
</Breadcrumb.Item>
);
});
return extraBreadcrumbItems;
};
breadcrumbItems = () => {
const home = [
<Breadcrumb.Item key="main">
<Link to="/main">首页</Link>
</Breadcrumb.Item>,
];
return home.concat(this.breadcrumbProps())
};
render() {
return (
<div>
<Breadcrumb>{this.breadcrumbItems()}</Breadcrumb>
</div>
);
}
}
export default withRouter(BreadcrumbList);