我可以将自定义 param/prop 从 config.js 传递到面包屑吗? [Pro Antd React]
Can I to pass custom param/prop from config.js to breadcrumbs? [Pro Antd React]
我有 pro antd 应用程序。
我有一个问题:我希望我的面包屑项的名称与配置中的 name 不同。
我想在config.js
中传递当前路由的面包屑标签参数
我该怎么做?
在 itemRender 方法参数 route 中没有自定义道具,我将其传递给 config.js.
根据 antd 专业文档
Breadcrumbs are implemented by PageHeaderWrapper, Layout will be
rendered according to breadcrumb generated by MenuData and rendered by
PageHeaderWrapper. PageHeaderWrapper is packaged into Ant Design's
PageHeader, and the api is identical.
我更改面包屑标签的方法是在 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
我有 pro antd 应用程序。
我有一个问题:我希望我的面包屑项的名称与配置中的 name 不同。
我想在config.js
中传递当前路由的面包屑标签参数我该怎么做?
在 itemRender 方法参数 route 中没有自定义道具,我将其传递给 config.js.
根据 antd 专业文档
Breadcrumbs are implemented by PageHeaderWrapper, Layout will be rendered according to breadcrumb generated by MenuData and rendered by PageHeaderWrapper. PageHeaderWrapper is packaged into Ant Design's PageHeader, and the api is identical.
我更改面包屑标签的方法是在 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