面包屑导航支持多级参数

例:
当前router为/:appkey/:packageId
父级router为/:appkey
当前pathname为/com.mock.ly/58

可以看出appkey=com.mock.ly, packageId=58
目前这种场景下,面包屑中父级连接直接展示为/:appkey,没有解析

本次commit支持根据当前多param去填充面包屑中父级页面连接
This commit is contained in:
汪亚辉
2017-10-24 18:55:06 +08:00
parent bfca2746d8
commit d2ac91839a
+15 -1
View File
@@ -24,6 +24,7 @@ const Bread = ({ menu, location }) => {
}
}
let paramMap = {}
if (!current) {
pathArray.push(menu[0] || {
id: 1,
@@ -36,6 +37,19 @@ const Bread = ({ menu, location }) => {
})
} else {
getPathArray(current)
let keys = []
let values = pathToRegexp(current.route, keys).exec(location.pathname.replace('#', ''))
if (keys && values && (keys.length + 1) === values.length) {
keys.forEach((currentValue, index) => {
if (typeof currentValue.name !== 'string') {
return
}
paramMap[currentValue.name] = values[index + 1]
})
}
}
// 递归查找父级
@@ -48,7 +62,7 @@ const Bread = ({ menu, location }) => {
return (
<Breadcrumb.Item key={key}>
{((pathArray.length - 1) !== key)
? <Link to={item.route || '#'}>
? <Link to={pathToRegexp.compile(item.route)(paramMap) || '#'}>
{content}
</Link>
: content}