react项目笔记7---面包屑2与menu配合使用。

只需要修改default页面

导入文件
import { Link } from 'react-router-dom'
import menus from './../utils/menu'
删除
import BreadcrumbNameMap from './../utils/BreadcrumbNameMap'
添加itemRender函数
itemRender(route, params, routes, paths) {
    const last = routes.indexOf(route) === routes.length - 1;
    // console.log('paths', paths)
    return last ? (
      <span>{route.breadcrumbName}</span>
    ) : (
      <Link to={route.path}>{route.breadcrumbName}</Link>
    );
  }
  在render中删除
  const { location } = this.props
    // console.log(location)
    const arr = location.pathname.split('/')
    // console.log(arr) ["", "pro", "list"]
    const paths = arr.filter( i => i)
    console.log(paths) // ['pro', 'list']
    const extraItems = paths.map((_, index) => {
      const url = "/" + paths.slice(0, index + 1).join('/')
      console.log(url) // 拿到key值
      return (
        <Breadcrumb.Item>
          { BreadcrumbNameMap[url] }
        </Breadcrumb.Item>
      )
    })
    const items = [
      <Breadcrumb.Item>
        <a href="/">系统首页</a>
      </Breadcrumb.Item>
    ].concat(extraItems)
    修改核心代码
<Breadcrumb > { items }</Breadcrumb>
为
<Breadcrumb itemRender={this.itemRender.bind(this)} routes={menus} />

修改后的页面全部代码为

import React ,{Component} from 'react';
import { Layout , Breadcrumb} from 'antd';
import 'antd/dist/antd.css';
import './default.css'
import SliderMenu from './components/sliderMenu'
import {Switch,Route,Redirect} from 'react-router-dom'
import { Link } from 'react-router-dom'
import Home from './../views/home/index'
import Pro from './../views/pro/index'
import User from './../views/user/index'
import Permission from './../views/user/permission'
import Cart from './../views/cart/index'
import Order from './../views/order/index'
import menus from './../utils/menu'

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
 
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

class SiderDemo extends Component {
  state = {
    collapsed:false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  itemRender(route, params, routes, paths) {
    const last = routes.indexOf(route) === routes.length - 1;
    // console.log('paths', paths)
    return last ? (
      <span>{route.breadcrumbName}</span>
    ) : (
      <Link to={route.path}>{route.breadcrumbName}</Link>
    );
  }
  

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <SliderMenu/>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Breadcrumb itemRender={this.itemRender.bind(this)} routes={menus} />
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path="/home" component = { Home } />
              <Route path="/users/list" component = { User } />
              <Route path="/pro/list" component = { Pro } />
              <Route path="/users/permission" component = { Permission } /> 
              <Route path="/cart/list" component = { Cart } />
              <Route path="/order/list" component = { Order } />
              <Redirect to="/home" exact path="/" />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo;