【避坑指“难”】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"))

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_42224055/article/details/108790625
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2023-01-03 20:49:55
阅读 ( 380 )
分类：职场

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

@ant-design/pro-layout

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看