【避坑指“难”】ant-desigh+prolayout布局，修改面包屑的分隔符，百度搜遍了都找不到办法，今天终于解决了

ProComponents前端小伙伴对此是又爱又恨啊，一些属性配置实在隐藏的太深了，搜索引擎翻了个遍，难道全世界只有我想改面包屑的分隔符吗，简直是难为胖虎。

@ant-design/pro-layout

@ant-design/pro-layout.

 npm install --save-dev @ant-design/pro-layout

这是默认的面包屑样式：/

为了修改面包屑样式，需要改进其中的breadcrumbRender，代码如下（这里很重要！！！！！！）

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

导入面包屑组件:

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

在return的jsx最外层包裹面包屑组件:

 <PageHeaderWrapper title="我的测试">
      这是我的测试页面
 </PageHeaderWrapper>

在路由进行配置:

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

到这里，开篇的那张图的面包屑就实现了。

接下来就开始改面包屑的“瞎子摸鱼游戏”。

俗话说的话，想解决问题，就追溯到问题的根源，回到起点去。程序员写代码的最开始…就是官方文档了，找到ProLayout的官方文档：https://procomponents.ant.design/components/layout#api

直奔主题，看下图：

breadcrumbRender配置源码：

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

Breadcrumb配置源码：

看到这里似乎有点头绪，修改PageHeaderWrapper 传入参数来复写默认值:

面包屑分隔符成功从 “/” 改成了 “<”

总结：看完全文，重点就在于

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