Tell me about a problem I’ve had in development for the last two days: how to turn breadcrumbs into links in ANTD Pro V4.

You can find relevant questions and solutions for this problem in antD issue, but it is useless for me! Why is that?

The breadcrumb is implemented by a PageHeaderWrapper, and the Layout is displayed from the breadcrumb generated by MenuData through a PageHeaderWrapper. PageHeaderWrapper is wrapped into Ant Design’s PageHeader, with exactly the same API.

Here’s what the official documentation says: if you want to use the built-in breadcrumbs, you need to use the PageHeaderWrapper component:

<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>Copy the code

This does show the breadcrumbs normally, but the breadcrumbs are just text and can’t be clicked. The above mentioned issue to provide a solution is to modify the SRC/components/PageHeaderWrapper/breadcrumb. Js code, But now the PageHeaderWrapper component is wrapped in the @ant-Design/Pro-layout dependencies, in other words, even if I went to find the code and changed it, it would be useless.

I found the Settings on this side of the page according to the documentation:

In the layouts/BasicLayout.tsx file, I found some Settings for breadcrumbs:

  • If I comment out the white box, the crumbs will still show up;

  • If I comment out the code in the orange box, the breadcrumbs will not show the “home page.”

Note Even if the PageHeaderWrapper component has breadcrumbs built in, it can be modified in this file.

Finally, I found a solution by looking at the ProLayoutComponents source code:

  itemRender={(router = {}) => {
    if (router.component) {
      return <Link to={router.path}>{router.breadcrumbName}</Link>
    }
    return router.breadcrumbName
  }}
Copy the code

That’s what the white box looks like below:

OK~ Problem solved ~~

But the product has another requirement, some pages of bread crumbs need to bring the parent query conditions, and jump to the parent page, query conditions need to backfill the page filter form, and according to the query conditions query out of the page data. This I realize a little frustrated, I will not write in detail, the general idea is good, if you see the officer has a more elegant way to achieve, please leave a message, I will go to do optimization!

When I use PageHeaderWrapper on the page, I add the pageHeaderRender property:

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

Return an array of data by writing this.pageHeaderRender.

PageHeaderRender must return an array, and the array item cannot be an object, which is where I’m confused, as the documentation says

PageHeaderWrapper is wrapped into Ant Design’s PageHeader, with exactly the same API.

Shouldn’t the PageHeader property be an object? My final result is to return an array of HTML items, something like this:

    [
        <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>
    ]
Copy the code

It sucks, but it works 🙂