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”))
面包屑下面的那行字去掉
来源:https://blog.csdn.net/weixin_42224055/article/details/108790625#comments_13894324