面包屑

面包屑

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