如何在 ant-design-pro v4 中把面包屑变为连接

说说我这两天开发时遇到的问题：如何在 antd pro v4 中把面包屑变为连接。

这个问题在 antd 的 issue 中能够找到相关提问及解决方案，然而对我来讲没用呀！为何？

面包屑由 PageHeaderWrapper 实现，Layout 将 根据 MenuData 生成的 breadcrumb，并经过 PageHeaderWrapper 将其展示。 PageHeaderWrapper 封装至 Ant Design 的 PageHeader，api 彻底相同。

这是官方文档的描述，即若是要用内置的面包屑，则须要用到 PageHeaderWrapper 组件：

<PageHeaderWrapper
    loading={loading}
  >
    <Card bordered={false}>
      ...
      <Button onClick={this.cancelRelate} className={styles.cancelRelateBtn} loading={cancelRelateLoading}>
        xxx
      </Button>
      <a href="#" onClick={this.checkRelateRule}>
        xxx
      </a>
      <Table
        {...tableProps}
      />
    </Card>
  </PageHeaderWrapper>
复制代码

这样子的确能够正常展现出面包屑，但是面包屑只是文字而已，并不能点击。 而上述提到的 issue 提供的解决办法是修改 src/components/PageHeaderWrapper/breadcrumb.js 里的代码，但是如今 PageHeaderWrapper 组件已经被封装在依赖包 @ant-design/pro-layout 里的，换言之就算我去找到代码而且改了，那也是徒劳。

我根据文档说的，找到了页面这边的设置：

尝试之后，发现面包屑消失了，这让我很费解，多是我在用的 routes 格式并非严格的如 demo 所示。

接着我在 layouts/BasicLayout.tsx 文件中发现了有关于面包屑的一些设置：

• 若是我把白色框这段代码注释掉，面包屑依旧能够展现；

• 若是我把橙色框的这段代码注释掉，则面包屑不会展现“首页”。

说明即便 PageHeaderWrapper 组件内置了面包屑，也是能够在这个文件中进行修改的。

最后经过翻 ProLayoutComponents 组件的源代码，我找到了解决方案：

itemRender={(router = {}) => {
    if (router.component) {
      return <Link to={router.path}>{router.breadcrumbName}</Link>
    }
    return router.breadcrumbName
  }}
复制代码

也就是下图白色框部分的内容：

OK~ 问题解决~~

可是产品还有另外一个需求，某些页面的面包屑须要带上父查询条件，并且跳转到父页面后，查询条件须要回填到页面的过滤表单里，而且按照查询条件查询出页面数据。这个我实现起来有点儿挫，就不详细写了，大概思路说一下就好，若是各位看官有更优雅的实现方式，麻烦留言，我必定去作优化！

我在页面使用 PageHeaderWrapper 时，添加了 pageHeaderRender 属性：

<PageHeaderWrapper loading={loading} pageHeaderRender={(routers) => this.pageHeaderRender(routers)} >

经过编写 this.pageHeaderRender 返回一个数组数据。

pageHeaderRender 必需要返回一个数组，并且数组项不能是对象，这也是我疑惑的地方，明明文档说了

PageHeaderWrapper 封装至 Ant Design 的 PageHeader，api 彻底相同。

而 PageHeader 的属性难道不该该是一个对象？ 最后个人处理结果是返回一个数组，数组项是一个个 html，就像是这样子：

[
        <Fragment>
            <span className={styles.breadcrumbSpan}>{xxx}</span><span className={styles.breadcrumbSlash}>/</span>
        </Fragment>,
        <Fragment>
            <Link to={path} className={styles.breadcrumbLink}>{xxx}</Link><span className={styles.breadcrumbSlash}>/</span>
        </Fragment>,
        <Fragment>
          <a
            className={styles.breadcrumbLink}
            href="#"
            onClick={(e) => {
              e.preventDefault()
              const { dispatch } = this.props
              dispatch(routerRedux.push({
                pathname: path,
                query: {
                  filterValues,
                }
              }))
            }}
          >
            {breadcrumbName}
          </a>
        </Fragment>
    ]
复制代码

很挫，可是能够用 :)