如何在 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>
    ]
複製代碼

很挫，可是能夠用 :)