性能示例展现：

官网示例：

封装实现的示例：

技术栈：JS+TS+React+React 节点克隆 +React 组件通信

面包屑导航作用就是标识以后在那个路由页面

面包屑导航应用办法如下：

import Breadcrumb from '@/components/Breadcrumb'

const Article = () => {
  return <div>
    // separator: 分隔符 
    <Breadcrumb separator='/'>
      <Breadcrumb.Item> 首页 </Breadcrumb.Item>
      <Breadcrumb.Item> 内容治理 </Breadcrumb.Item>
    </Breadcrumb>
  </div >
}
export default Article

自定义面包屑导航 Breadcrumb 的代码

import React from 'react'
import BreadcrumbItem from '../BreadcrumbItem'
interface PropsType {children: JSX.Element | JSX.Element[]
  separator?: string
}

const Breadcrumb = (props: PropsType): JSX.Element => {const { separator, children} = props
  /* 
      为什么要克隆 children？如果不克隆 children，那么 separator 是 Breadcrumb 组件属性的话，是无奈
         传递给 BreadcrumbItem 组件，导致 BreadcrumbItem 没有分隔符
 */
  //  React.Children.map 用来遍历 ReactNode 元素
  //  将所有 childred 遍历，将 element 克隆，并且给新的 element 加上 separator(分隔符) 
  //  React.Children.map 返回一个新的 ReactNode 数组，将新的渲染
  const BreadcrumbItemList = React.Children.map(children, ((element, index) => {if (children instanceof Array) {if ((children.length - 1) === index) {return React.cloneElement(element)
      }
      return React.cloneElement(element, {separator: separator ? separator : '>'})
    }
  }))


  return <div className='breadcrumb'>
    {BreadcrumbItemList}
  </div>
}

Breadcrumb.Item = BreadcrumbItem
export default Breadcrumb

面包屑导航 BreadcrumbItem 的代码

interface ItemType {
  className?: string
  href?: string
  onClick?(): void
  children: any
  title?: string,
  separator?: string
}

const BreadcrumbItem = ({className, href, onClick, children, title, separator}: ItemType) => {const click = () => {href && navigate(`${href}`)
  }
  return (
    <div
      className={classNames([className, 'breadcrumb-item'])}
      onClick={onClick || click}
    >
      {title}
      {children}
      // 除了最初一个 item，其余的都有 separator 分隔符, 这样就实现了面包屑导航栏
      {separator}
    </div>
  )
}
export default BreadcrumbItem