求助：MUI Breadcrumbs与React-Router集成的现代可行方案

以下是适配React Router v6和Material-UI v5的可运行现代方案，同时解决你遇到的所有TypeScript错误：

import React from 'react';
import { Breadcrumbs, Link, Typography } from '@mui/material';
import { useLocation, Link as RouterLink } from 'react-router-dom';

const BreadcrumbNav = () => {
  // 用React Router v6的useLocation钩子获取当前路由信息，替代过时的render props写法
  const location = useLocation();
  
  // 拆分路径，过滤空字符串生成面包屑项数组
  const pathnames = location.pathname.split('/').filter(Boolean);

  return (
    <Breadcrumbs aria-label="breadcrumb">
      {/* 首页面包屑项 */}
      <Link component={RouterLink} to="/">
        首页
      </Link>
      {/* 遍历路径生成对应面包屑项 */}
      {pathnames.map((path, index) => {
        // 拼接当前项的完整路由路径
        const currentFullPath = `/${pathnames.slice(0, index + 1).join('/')}`;
        // 判断是否为最后一项（当前页面）
        const isCurrentPage = index === pathnames.length - 1;

        return isCurrentPage ? (
          <Typography key={currentFullPath} color="text.primary">
            {path}
          </Typography>
        ) : (
          <Link key={currentFullPath} component={RouterLink} to={currentFullPath}>
            {path}
          </Link>
        );
      })}
    </Breadcrumbs>
  );
};

export default BreadcrumbNav;

针对你遇到的错误的具体修复说明： #

1. 函数无法赋值给ReactNode
   旧示例用了React Router v5的render props（比如Route的children传入函数），这种写法在v6中已被废弃，且不符合ReactNode的类型要求。改用useLocation钩子直接获取location，从根本上解决类型不匹配问题。

2. map参数的类型与未使用问题

   • 原代码中value参数未被使用，TS会抛出未声明变量警告，这里将参数名改为path并实际用于生成路由路径和显示文本；
   • 由于pathnames是明确的string[]类型，TS会自动推断path为string、index为number，无需手动声明也不会出现隐式any错误；
   • 给每个面包屑项添加了基于完整路径的唯一key，符合React列表渲染的规范。

依赖版本要求 #

确保你的项目依赖满足：

• React Router v6.0.0+
• Material-UI v5.0.0+
• TypeScript 4.5.0+

内容的提问来源于stack exchange，提问作者user3217883