antdpro PageHeaderWrapper 面包屑

重写默认的路由

<PageHeaderWrapper
        className="site-page-header"
        title="Title"
        subTitle="This is a subtitle"
        breadcrumb={
          {
            routes: [
              {
                path: 'index',
                breadcrumbName: 'First-level Menu',
              },
              {
                path: 'first',
                breadcrumbName: 'Second-level Menu',
              },
              {
                path: 'second',
                breadcrumbName: 'Third-level Menu',
              },
            ]
          }}
      >

PageHeaderWrapper 有 antd PageHeader 所有属性
https://pro.ant.design/docs/layout-component-cn#pageheaderwrapper

https://ant.design/components/page-header-cn/#/index/first

重写面包屑导航

import itemRender from '../../../../utils/breadcrumbRenderLink';

<PageHeaderWrapper
      content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
      breadcrumb={{
        itemRender: itemRender,
        routes: [
          {
            path: '/',
            breadcrumbName: '首页',
          },
          {
            path: '/record',
            breadcrumbName: '兑奖记录',
          },
          {
            breadcrumbName: '实物发奖',
          },
        ],
      }}
    >


// breadcrumbRenderLink.js    
import router from 'umi/router';

function itemRender(route, params, routes, paths) {
  const last = routes.indexOf(route) === routes.length - 1;
  const routerJump = (link, paths) => {
    return () => router.push(link)
  }
  return last ? (
    <span>{route.breadcrumbName}</span>
  ) : (
      <span style={{
        cursor: 'pointer'
      }} onClick={routerJump(paths.join('/'), paths)}>{route.breadcrumbName}</span>
    );
}

export default itemRender