ProComponents front-end partners love and hate this ah, some attribute configuration is hidden too deep, search engines searched all over the world, am I the only one who wants to change the breadcrumb separator?

@ant-design/pro-layout

@ant-design/pro-layout.

 npm install --save-dev @ant-design/pro-layout
Copy the code

This is the default breadcrumb style: /

To change the breadcrumb style, you need to improve the breadcrumbRender as follows (important here ！！！！！！)

breadcrumbRender={(routers = []) = > {
          console.log('2333', routers);
          let arr = [
            {
              path: '/'.breadcrumbName: formatMessage({ id: 'menu.home'})},... routers, ]localStorage.setItem('changeRoute'.JSON.stringify(arr))
          return arr
        }}
Copy the code

Import breadcrumb component:

import { PageHeaderWrapper } from '@ant-design/pro-layout';
Copy the code

Wrap the breadcrumb component in the return JSX outermost layer:

 <PageHeaderWrapper title="My Test"> This is my test page </PageHeaderWrapper>Copy the code

Configure routes:

{
  path: '/demo'.name: 'test'.hideInMenu: 'true'.component: './demo'
},

Copy the code

At this point, the breadcrumbs of the opening diagram are realized.

Then began to change the bread crumbs of the “blind fish game.”

As the saying goes, if you want to solve a problem, go back to the root of the problem and go back to the beginning. When programmers start writing code… Is the official document, find ProLayout official documentation: procomponents. Ant. The design/components /…

To cut to the chase, look at the picture below:

BreadcrumbRender configuration source:

breadcrumbRender? :(routers: AntdBreadcrumbProps['routes']) = > AntdBreadcrumbProps['routes'];
Copy the code

Breadcrumb configuration source:If you see something here, modify the PageHeaderWrapper passed in to override the default value:

Breadcrumb separator successfully changed from “/” to “<“

Conclusion: look at the complete text, the key lies in

  • localStorage.setItem('changeRoute', JSON.stringify(arr))
  • JSON.parse(localStorage.getItem("changeRoute"))