React中Material-UI面包屑条件渲染异常：分隔符缺失、项换行

问题现象 #

• 当instrument参数存在时，面包屑第二个分隔符不显示，无法呈现Home / Musician / Bob - guitar的预期效果
• 面包屑项出现异常换行

问题根源 #

1. 分隔符不显示：MUI的Breadcrumbs组件仅将直接子元素识别为独立面包屑项，并自动添加分隔符。原代码中用<>将Musician链接和详情文本包裹成单个Fragment，导致Breadcrumbs只识别到一个子节点，无法在两个元素间生成分隔符。
2. 面包屑换行：Fragment包裹的元素未被Breadcrumbs纳入统一布局逻辑，导致布局规则失效，触发换行。

修复方案 #

移除Fragment包裹，让每个面包屑项直接作为Breadcrumbs的子元素，可通过拆分条件渲染实现：

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

export default function MyBreadcrumb() {
  const { instrument, name } = useParams();
    
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link to="/">Home</Link>
      {/* 无instrument时，仅渲染名称项 */}
      {!instrument && <Typography color="text.primary">{name}</Typography>}
      {/* 有instrument时，依次渲染Musician和详情项 */}
      {instrument && <Link to="/musician">Musician</Link>}
      {instrument && <Typography color="text.primary">{name} - {instrument}</Typography>}
    </Breadcrumbs> 
  )
}

注意事项 #

• 原代码中Link to={-1}是错误写法，需替换为实际路由路径（如示例中的/musician），避免路由跳转异常。

替代写法（数组返回多元素） #

若不想拆分多个条件判断，可通过数组返回多元素（需给每个元素添加唯一key）：

<Breadcrumbs aria-label="breadcrumb">
  <Link to="/">Home</Link>
  {!instrument ? (
    <Typography color="text.primary">{name}</Typography>
  ) : (
    [
      <Link key="musician" to="/musician">Musician</Link>,
      <Typography key="detail" color="text.primary">{name} - {instrument}</Typography>
    ]
  )}
</Breadcrumbs>

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