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

Yjing景

于 2024-04-18 18:44:05 发布

阅读量876

点赞数 7

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

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

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章