最近用到antd的menu導(dǎo)航菜單組件，官網(wǎng)中默認(rèn)選中菜單功能defaultSelectedKeys只能默認(rèn)選中已有的菜單，對(duì)于不在菜單中的內(nèi)嵌子頁(yè)面并不能默認(rèn)選中父菜單，菜單沒(méi)有選中狀態(tài)。所以我要想辦法得到內(nèi)嵌子頁(yè)面的父菜單，放到defaultSelectedKeys中。
比如當(dāng)前的菜單的url是： http://xxx.com/system/user/detail/789404
我要在菜單數(shù)組中匹配到最相近的父菜單：
menus = [
{url: '/', name: '首頁(yè)'},
{url: '/system', name: '系統(tǒng)'},
{url: '/system/user', name: '用戶(hù)', children: [{url: '/system/user/detail', name: '用戶(hù)詳情'}]},
{url: '/system/role', name: '角色', children: [{url: '/system/role/detail', name: '角色詳情'}]},
{url: '404', name: '404'},//會(huì)有一些亂七八糟的路徑
...
]
也就是： /system/user/detail/
用了react-router-dom的matchPath方法,只能精確的匹配路徑，看來(lái)要自己寫(xiě)了。。。
根據(jù)群友的提示，想到了用js的match大法
由此可看出match能篩選出包含有字符串的路徑，好的成功了第一步！
但是也發(fā)現(xiàn)了match會(huì)把404這種路徑都篩選出來(lái)了，換成startsWith會(huì)更好！
第二步就是將這些篩選出來(lái)的路徑進(jìn)行進(jìn)一步取值，根據(jù)規(guī)律可看出路徑url.length最長(zhǎng)的就是最匹配的
resultMenu= menus.reduce((acc, cur) => (acc.url.length > cur.url.length) ? acc : cur)
完整代碼:
/**
pathname: '/system/user/detail/789404'
menus: 菜單數(shù)組
*/
getMenuPath = (pathname, menus) => {
let result = [] //模糊匹配到的路徑
let resultMenu = [] //最終匹配到的路徑
// 得到所有的模糊匹配路徑
const foo = (_menus) => {
_menus.forEach(_menu => {
const { url, children, ...rest } = _menu
// 用startsWith匹配到開(kāi)頭路徑
if (url && pathname.startsWith(url) && !Array.isArray(children)) {
result = result.concat([{ url, ...rest }])
} else if (Array.isArray(children)) {
//如果還有children 深層遞歸
foo(children)
}
})
}
foo(copyJson(menus))
if (result.length > 0) {
// 得到最近似精確的匹配路徑 url越長(zhǎng)說(shuō)明越精確
resultMenu= result.reduce((acc, cur) => (acc.url.length > cur.url.length) ? acc : cur)
}
return resultMenu
}
const menus = [
{url: '/', name: '首頁(yè)'},
{url: '/system', name: '系統(tǒng)'},
{url: '/system/user', name: '用戶(hù)', children: [{url: '/system/user/detail', name: '用戶(hù)詳情'}]},
{url: '/system/role', name: '角色', children: [{url: '/system/role/detail', name: '角色詳情'}]},
{url: '404', name: '404'}//會(huì)有一些亂七八糟的路徑
]
const pathname = location.pathname
//調(diào)用
getMenuPath(pathname, menus)
最終獲取到的路徑是：{url: '/system/user/detail', name: '用戶(hù)詳情'}，完美解決問(wèn)題。如有更好的解決方法，跪求留言指教
END-----------------------------------------------
tips: 簡(jiǎn)書(shū)上交流可能會(huì)看不到消息，如有問(wèn)題，歡迎進(jìn)群交流50063010
