我可以将自定义参数/道具从 config.js 传递到面包屑吗？ [Pro Antd React]答案

【问题标题】：Can I to pass custom param/prop from config.js to breadcrumbs? [Pro Antd React]我可以将自定义参数/道具从 config.js 传递到面包屑吗？ [Pro Antd React]
【发布时间】：2020-05-01 05:14:42
【问题描述】：

我有 pro antd 应用程序。

我有一个问题：我希望我的面包屑项目的名称与配置中的 name 不同。

我想在 config.js 中传递当前路由的面包屑标签的参数

我该怎么做？

在 itemRender 方法参数中 route 没有自定义道具，我将其传递给 config.js。

【问题讨论】：

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

根据 antd pro 文档

面包屑由PageHeaderWrapper实现，布局将根据 MenuData 生成的面包屑呈现并由 PageHeaderWrapper。 PageHeaderWrapper 被打包到 Ant Design 的 PageHeader，和api是一样的。

我更改面包屑标签的方式是在locale 中设置值，然后是本地化文件夹，然后是menu.js。然后在配置中使用相同的名称进行路由。
例如，假设我想将settings/roles 的面包屑设置为My Setting/My Role 然后在 config.js 文件中 ->

{
    name: 'settings',
    path: '/setting',
    routes:[
    {
       name: 'roles',
       path: '/setting/roles',
       component: './Setting/Roles',
    },
}

然后在src > locales > en-US > menu.js

'menu.settings' : "My Setting",
'menu.settings.roles' : "My Role",

然后我会得到面包屑My Setting/My Role 在这里我不得不去en-US > menu.js 因为在config.js 我已经设置了

locale: {
    default: 'en-US',
}

要更改名称之间的分隔符"/"，请转到BasicLayout.jsx，找到itemRender，在那里你会找到

<Link to={paths.join('/')}>{route.breadcrumbName}</Link>

这一行是显示在面包屑中的那一行。从menu.js，我们正在设置route.breadcrumbName

【讨论】：