1、已經(jīng)定義好的全部的路由配置，需要是這種格式的，可以再加上關(guān)于icon的內(nèi)容.
const routerMap = [
{
path: '/home',
breadcrumbName: 'Home',
},
{
path: '/page1',
breadcrumbName: 'Page 1',
children: [
{
path: '/page1/page101',
breadcrumbName: 'Page 101',
children: [
{
path: '/page1/page101/page10101',
breadcrumbName: 'Page 10101',
}, {
path: '/page1/page101/page10102',
breadcrumbName: 'Page 10102',
}
]
}, {
path: '/page1/page102',
breadcrumbName: 'Page 102',
children: [
{
path: '/page1/page102/page10201',
breadcrumbName: 'Page 10201',
}, {
path: '/page1/page102/page10202',
breadcrumbName: 'Page 10202',
}
]
}
]
}
]
2、代碼
import React, { Component } from 'react'
import { Breadcrumb } from 'antd'
import { Link } from 'react-router-dom'
//1、已經(jīng)定義好的全部的路由配置，需要是這種格式的，可以再加上關(guān)于icon的內(nèi)容
const routerMap = [
{
path: '/home',
breadcrumbName: 'Home',
},
{
path: '/page1',
breadcrumbName: 'Page 1',
children: [
{
path: '/page1/page101',
breadcrumbName: 'Page 101',
children: [
{
path: '/page1/page101/page10101',
breadcrumbName: 'Page 10101',
}, {
path: '/page1/page101/page10102',
breadcrumbName: 'Page 10102',
}
]
}, {
path: '/page1/page102',
breadcrumbName: 'Page 102',
children: [
{
path: '/page1/page102/page10201',
breadcrumbName: 'Page 10201',
}, {
path: '/page1/page102/page10202',
breadcrumbName: 'Page 10202',
}
]
}
]
}
]
export default class Bread extends Component {
state = {
breadCrumb: [],//Breadcrumb.Item項(xiàng)數(shù)組
}
componentDidMount() {
this.renderBreadcrumbItems()
}
//2、根據(jù)全部的路由配置和當(dāng)前頁面的路徑篩選得到一個數(shù)組，這個數(shù)組是當(dāng)前頁面路徑所對應(yīng)的路由配置
/* 對路由配置的每一項(xiàng)path與currentPath進(jìn)行判斷：
先判斷是否相等：
相等：把該項(xiàng)的配置添加進(jìn)routes數(shù)組中，包括path、breadcrumbName。
不相等：再判斷當(dāng)前頁面路徑currentPath是否是以當(dāng)前路徑開頭。
若是：證明currentPath在他的children中，把該項(xiàng)的路由配置添加進(jìn)routes數(shù)組中，包括path、breadcrumbName、children的內(nèi)容為遞歸調(diào)用函數(shù)，傳入當(dāng)前項(xiàng)的children為參數(shù)。
若不是：直接進(jìn)行下一項(xiàng)。
得到的數(shù)組需要進(jìn)行翻轉(zhuǎn)
*/
getRoutesList = () => {
const currentPath = this.props.pathname;//當(dāng)前頁面的路徑
const routes = [];//符合當(dāng)前路徑過程的路由配置數(shù)組
// 閉包
function fn(data) {
data.forEach(item => {
//先判相等 再判開頭
if (item.path === currentPath) {
//相等
routes.push({ path: item.path, breadcrumbName: item.breadcrumbName })
} else {
if (currentPath.startsWith(item.path)) {
//不相等，但是是他的children
routes.push({ path: item.path, breadcrumbName: item.breadcrumbName, children: fn(item.children) })
}
}
})
}
fn(routerMap)
return routes.reverse() //注意：這里要進(jìn)行數(shù)組翻轉(zhuǎn)
}
//3、根據(jù)篩選后的路由配置渲染Breadcrumb.Item：如果是最后一項(xiàng)則直接渲染文字文字內(nèi)容，不是最后一項(xiàng)要渲染鏈接。
renderBreadcrumbItems = () => {
const routes = this.getRoutesList()
const currentPath = this.props.pathname
let breadCrumb = []
const bread = (data) => {
data.forEach(item => {
const { path, breadcrumbName, children } = item;
//判斷是否是最后一項(xiàng)
const isLast = path === currentPath //true最后一項(xiàng)渲染文字，false渲染鏈接
const i = <Breadcrumb.Item key={path}>
{isLast ? <span>{breadcrumbName}</span> : <Link to={path}>{breadcrumbName}</Link>}
</Breadcrumb.Item>
breadCrumb.push(i)
if (children) {
bread(children)
}
})
}
bread(routes)
this.setState({
breadCrumb
})
}
render() {
return (
<div>
<Breadcrumb>
{this.state.breadCrumb}
</Breadcrumb>
</div>
)
}
}
3、在組件中使用的時候需要傳入當(dāng)前頁面的路勁發(fā)作為Bread組件的屬性。
<Bread pathname={this.props.location.pathname}></Bread>
4、假設(shè)當(dāng)前頁面的路徑為 ‘/page1/page102/page10201’，經(jīng)過上述操作篩選后得到的對應(yīng)路徑上的路由配置routes的值為：
routs=[
{path: '/page1', breadcrumbName: 'Page 1', children: undefined},
{path: '/page1/page102', breadcrumbName: 'Page 102', children: undefined},
{path: '/page1/page102/page10201', breadcrumbName: 'Page 10201'}
]
5、關(guān)于startWith：
startsWith 是 JavaScript 中一個字符串方法，用于檢測一個字符串是否以指定的子串開頭。如果是，則返回 true；如果不是，則返回 false。
這個方法對于構(gòu)建面包屑導(dǎo)航或任何需要判斷路徑是否以特定前綴開始的場景都非常有用。
const str = 'Hello, world!';
const prefix = 'Hello';
if (str.startsWith(prefix)) {
console.log('The string starts with "Hello".');
} else {
console.log('The string does not start with "Hello".');
}
// 輸出：The string starts with "Hello".
在路由匹配的上下文中，startsWith 可以用來檢查當(dāng)前路徑是否以某個路由的路徑開始。如果是這樣，那么就可以認(rèn)為該路由是當(dāng)前路徑的一個匹配項(xiàng)，并可能將其添加到面包屑導(dǎo)航中。文章來源：http://www.zghlxwxcb.cn/news/detail-858075.html
例如，如果你有一個路由對象，其 path 屬性為 /home/profile，并且當(dāng)前路徑是 /home/profile/settings，那么調(diào)用 currentPath.startsWith(route.path) 將返回 true，因?yàn)楫?dāng)前路徑確實(shí)以路由的路徑開始。文章來源地址http://www.zghlxwxcb.cn/news/detail-858075.html
到了這里，關(guān)于react17+antd4.18 動態(tài)實(shí)現(xiàn)面包屑導(dǎo)航Breadcrumb-----需改善的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
