antd pro V5 中使用keepalive 面包屑中无限循环及三级面包屑异常的一种建议

[zhiweishq]

在antd pro V5中使用多标签tabs时。

keepalive: [/./],
tabsLayout: {}

若配置路由中配置

{
path: 'setting',
name: '系统设置',
hideInMenu: true, access: "setting",
routes: [
{ path: '/setting', redirect: '/setting/industry' },
{ path: 'industry', name: '行业', component: './Setting/industry', access: "setup:industry" },
],
},

将出现循环点击时出现循环跳转，三级子页面点击时异常情况。
因此可以尝试在 node_modules/@alita/plugins/templates/keepalive/context.tpl中isKeepPath方法中追加以下内容：

if (route?.children != null) {
for (const ele of route?.children) {
if (path?.toLowerCase() === ele.path?.toLowerCase()) {
if (ele.element?.props.to != null) {
console.log('redirect')
isKeep = false;
break;
}
}
}
}

完整方法如下:

const isKeepPath = (aliveList: any[], path: string, route:any) => {
let isKeep = false;
aliveList.map(item => {
if (item === path) {
isKeep = true;
}
if (item instanceof RegExp && item.test(path)) {
isKeep = true;
}
if (typeof item === 'string' && item?.toLowerCase() === path?.toLowerCase()) {
isKeep = true;
}
})
if(isKeep === false){
isKeep = !!route.isKeepalive;
}
if(route?.redirect) {
console.log('redirect')
isKeep = false;
}
if (route?.children != null) {
for (const ele of route?.children) {
if (path?.toLowerCase() === ele.path?.toLowerCase()) {
if (ele.element?.props.to != null) {
console.log('redirect')
isKeep = false;
break;
}
}
}
}
return isKeep;
}