react17+antd4.18 动态实现面包屑导航Breadcrumb-----需改善

最新推荐文章于 2024-07-02 21:30:36 发布

Yjing景

最新推荐文章于 2024-07-02 21:30:36 发布

阅读量579

点赞数 7

分类专栏： React 文章标签： react Breadcrumb

本文链接：https://blog.csdn.net/weixin_45871977/article/details/137929218

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章介绍了如何在React应用中根据已定义的路由配置生成动态面包屑导航，通过`react-router-dom`库处理路径匹配，并在组件中实现筛选和渲染功能。

摘要由CSDN通过智能技术生成

1、已经定义好的全部的路由配置，需要是这种格式的，可以再加上关于icon的内容.

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、已经定义好的全部的路由配置，需要是这种格式的，可以再加上关于icon的内容
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项数组
    }
    componentDidMount() {
        this.renderBreadcrumbItems()
    }
    //2、根据全部的路由配置和当前页面的路径筛选得到一个数组，这个数组是当前页面路径所对应的路由配置
    /* 对路由配置的每一项path与currentPath进行判断：
    先判断是否相等：
            相等：把该项的配置添加进routes数组中，包括path、breadcrumbName。
            不相等：再判断当前页面路径currentPath是否是以当前路径开头。
                    若是：证明currentPath在他的children中，把该项的路由配置添加进routes数组中，包括path、breadcrumbName、children的内容为递归调用函数，传入当前项的children为参数。
                    若不是：直接进行下一项。
    
    得到的数组需要进行翻转
    */
    getRoutesList = () => {
        const currentPath = this.props.pathname;//当前页面的路径
        const routes = [];//符合当前路径过程的路由配置数组
        // 闭包
        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() //注意：这里要进行数组翻转
    }

    //3、根据筛选后的路由配置渲染Breadcrumb.Item：如果是最后一项则直接渲染文字文字内容，不是最后一项要渲染链接。
    renderBreadcrumbItems = () => {
        const routes = this.getRoutesList()
        const currentPath = this.props.pathname
        let breadCrumb = []
        const bread = (data) => {
            data.forEach(item => {
                const { path, breadcrumbName, children } = item;
                //判断是否是最后一项
                const isLast = path === currentPath  //true最后一项渲染文字，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、在组件中使用的时候需要传入当前页面的路劲发作为Bread组件的属性。

<Bread pathname={this.props.location.pathname}></Bread>

4、假设当前页面的路径为 ‘/page1/page102/page10201’，经过上述操作筛选后得到的对应路径上的路由配置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、关于startWith：
startsWith 是 JavaScript 中一个字符串方法，用于检测一个字符串是否以指定的子串开头。如果是，则返回 true；如果不是，则返回 false。

这个方法对于构建面包屑导航或任何需要判断路径是否以特定前缀开始的场景都非常有用。

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".