Breadcrumb面包屑

 

Breadcrumb.Item的属性：

参数	参数	类型	默认值	版本
href	链接的目的地	string	-	3.17.0
overlay	下拉菜单的内容	Menu | () => Menu	-	3.17.0
onClick	单击事件	(e:MouseEvent)=>void	-	3.17.0

使用：

<Breadcrumb.Item href="/">
      <Icon type="user" />
      <span>Application List</span>
</Breadcrumb.Item>

Breadcrumb 的属性：

 

参数	说明	类型	默认值	版本
itemRender	自定义链接函数，和 react-router 配置使用	(route, params, routes, paths) => ReactNode	-	3.17.0
params	路由的参数	object	-	3.17.0
routes	router 的路由栈信息	routes[]	-	3.17.0
separator	分隔符自定义	string|ReactNode	'/'	3.17.0

separator：作为面包屑的元素的间隔

itemRender使用：

//重写单个面包屑元素
function itemRender(route, params, routes, paths) {
  const last = routes.indexOf(route) === routes.length - 1;
  return last ? (
    <span>{route.breadcrumbName}</span>
  ) : (
    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
  );
}

　　

routes，元素可以有显示内容（breadcrumbName），有跳转链接（path），有自己子菜单（children）使用：

const routes = [
    {
      path: '/',
      breadcrumbName: '首页',
    },
    {
      path: '',
      breadcrumbName: '课程管理',
      children: [ //作为课程管理--下拉列表
        {
          path: '/courseMange/liveManage',
          breadcrumbName: '直播课程',
        },
        {
          path: '/courseMange/liveScheduleManage',
          breadcrumbName: '直播排课',
        },
      ],
    },
    {
      path: '',
      breadcrumbName: '基础配置',
      children: [//作为课程管理--下拉列表
        {
          path: '/baseConfig/categoryConfig',
          breadcrumbName: '项目配置',
        },
        {
          path: '/baseConfig/subjectConfig',
          breadcrumbName: '科目配置',
        },
      ],
    },
  ]

//separator作为面包屑的元素的间隔
<Breadcrumb separator="" routes={routes} />