js demo

import React, { memo } from 'react'
import { BreadBlogCreateWrapper } from './style'
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';

function handleClick(event) {
  // event.preventDefault();
  console.info('You clicked a breadcrumb.');
}

const BreadBlogCreate = memo(() => {
  const breadcrumbs = [
    <Link underline="hover" key="1" color="inherit" href="/admin/dashboard" onClick={handleClick}>
      首页
    </Link>,
    <Link underline="hover" key="2" color="inherit" href="/admin/blog" onClick={handleClick}>
      博客管理
    </Link>,
    <Typography key="3" color="text.primary">
      新建博客
    </Typography>,
  ];

  return (
    <BreadBlogCreateWrapper>
      <Breadcrumbs separator="›" aria-label="breadcrumb">
        {breadcrumbs}
      </Breadcrumbs>
    </BreadBlogCreateWrapper>  
  );
})

export default BreadBlogCreate

我们来看看效果，还是挺漂亮的对吧

ts封装

由于面包屑导航会经常被用到，于是我们需要对其进行封装，以达到长期使用的目的

接下来我们要使用typescrip

1, 首先我们来定义BreadConfig的类型

types/index.tsx

interface BreadConfig {
    href?:string;
    text:string;
}

2, 接着来定义我们的<Bread/>组件:

components/Bread/index.tsx

import { memo } from 'react'
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import { UUID } from 'uuidjs';

function handleClick(_event: any) {
  // event.preventDefault();
  console.info('You clicked a breadcrumb.');
}

const Bread = memo(({cfgs}:{cfgs:Array<BreadConfig>}) => {
  return (
    <section>
      <Breadcrumbs separator="›" aria-label="breadcrumb">
        {
          cfgs?.map((cfg: BreadConfig)=>{
            if (cfg.href) {
              return (
                <Link underline="hover" key={UUID.generate()} color="inherit" href={cfg.href} onClick={handleClick}>
                  {cfg.text}
                </Link>
              )
            }else{
              return <Typography key={UUID.generate()} color="text.primary">{cfg.text}</Typography>              
            }
          })
        }
      </Breadcrumbs>
    </section>  
  );
})

export default Bread

3, 使用

App.tsx

import './App.css'
import Bread from './components/Bread'

const cfgs:BreadConfig[] = [
  {
    href:"/admin/dashboard",
    text: "首页"
  },
  {
    href:"/admin/blog",
    text: "博客"
  },
  {
    text: "博客创建"
  }
]

function App() {
  return (
    <>
     <Bread cfgs={cfgs}/>
    </>
  )
}

export default App