React中使用Ant Design组件库实现面包屑联动

Ant Design组件库

1.准备工作:下包

npm i react-router-dom antd --save

2. 在Ant Design中找到面包屑3.以最为基础的面包屑为例 （用哪个面包屑都无所谓自我感觉最难得是联动）

 

4.然后我们通过react-router-dom中的useLocation方法获取页面路径

import { useLocation } from 'react-router-dom'

// 获取当前路径
  let location = useLocation()  

  console.log(location)

 

5.我们有此时所在的网址,我用split 字符串切割转数组的方法

console.log(location.pathname.split('/'))

然后我们就得到一个这样的数组

 我们想让这个数组变成这样的数组 

['', '/home', '/home/role', '/home/role/node']

我们仔细观察会发现

6.我的现实方法(这个方法不是唯一的能完成数据转换就行): 

/**
 * 将数组元素逐个拼接成路径字符串并存储到结果数组中，每个新路径都是基于之前路径的前缀增加一个元素。
 * @param {Array} arr - 输入的数组，包含要拼接的元素。
 * @returns {Array} items - 返回一个新的数组，其中每个元素是一个由原数组元素按顺序拼接成的路径字符串，用'/'分隔。
 *
 * 示例:
 * 输入: [ 'a', 'b', 'c' ]
 * 输出: [ 'a', 'a/b', 'a/b/c' ]
 */

let splicingData = (arr) => {
    let items = []; // 存储拼接后的路径字符串数组
    for (let i = 0; i < arr.length; i++) {
        // 将当前数组的前i个元素拼接成一个路径，并加入到items数组中
        items.push(arr.slice(0, i + 1).join('/'));
    }
    return items; // 返回结果数组
}

export default splicingData;

 7.有了数据就正常渲染就行

/* 导航面包屑组件，用于显示当前页面在网站结构中的位置 */
    <Breadcrumb
      /* 设置面包屑组件的样式，以调整其在页面中的间距 */
      style={{
        margin: '16px 0',
      }}

      /* 通过动态生成面包屑导航项，确保每个导航项都对应于URL路径的一部分 */
      items={splicingData(location.pathname.split('/')).map((item, index) => {
        /* 使用<a>标签包裹导航项的标题，使其可点击，并链接到相应的路径 */
        return {
          title: <a href={item}>{location.pathname.split('/')[index]}</a>
        }
      })}
    >
   </Breadcrumb>

8.完整代码

import { Breadcrumb } from 'antd'
import React from 'react'
import { useLocation } from 'react-router-dom'
import splicingData from '../../uilt/splicing'

function Index() {
  // 获取当前路径
  let location = useLocation()
  return (
    /* 导航面包屑组件，用于显示当前页面在网站结构中的位置 */
    <Breadcrumb
      /* 设置面包屑组件的样式，以调整其在页面中的间距 */
      style={{
        margin: '16px 0',
      }}

      /* 通过动态生成面包屑导航项，确保每个导航项都对应于URL路径的一部分 */
      items={splicingData(location.pathname.split('/')).map((item, index) => {
        /* 使用<a>标签包裹导航项的标题，使其可点击，并链接到相应的路径 */
        return {
          title: <a href={item}>{location.pathname.split('/')[index]}</a>
        }
      })}
    >
    </Breadcrumb>
  )
}

export default Index

别忘了咱们封装的数据方法

/**
 * 将数组元素逐个拼接成路径字符串并存储到结果数组中，每个新路径都是基于之前路径的前缀增加一个元素。
 * @param {Array} arr - 输入的数组，包含要拼接的元素。
 * @returns {Array} items - 返回一个新的数组，其中每个元素是一个由原数组元素按顺序拼接成的路径字符串，用'/'分隔。
 *
 * 示例:
 * 输入: [ 'a', 'b', 'c' ]
 * 输出: [ 'a', 'a/b', 'a/b/c' ]
 */

let splicingData = (arr) => {
    let items = []; // 存储拼接后的路径字符串数组
    for (let i = 0; i < arr.length; i++) {
        // 将当前数组的前i个元素拼接成一个路径，并加入到items数组中
        items.push(arr.slice(0, i + 1).join('/'));
    }
    return items; // 返回结果数组
}

export default splicingData;

这样就能实现面包屑的数据联动了 

一定要记住代码不是唯一的不要死记硬背代码重在理解