react项目笔记6---面包屑导航

首先在utils下面创建BreadcrumbNameMap.js 文件内容如下：

export default {
  '/home': '首页',
  '/users': '用户管理',
  '/users/list': '用户列表',
  '/users/permission': '管理员列表',
  '/pro': '产品管理',
  '/pro/list': '产品列表',
  '/cart': '购物车管理',
  '/cart/list': '购物车列表',
  '/order': '订单管理',
  '/order/list': '订单列表',
}

在default.jsx文件中导入antd的Breadcrumb和自己刚才写的BreadcrumbNameMap.js 导入方式如下

import { Layout, Breadcrumb } from 'antd';
import BreadcrumbNameMap from './../utils/BreadcrumbNameMap'

修改default.jsx的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>