如何基于slice函数实现可独立跳转的breadcrumb路由导航

现有代码的核心问题 #

• 非最后一项的跳转地址直接绑定了props.path，没有按路径片段生成独立跳转目标，导致所有可点击项都跳同一个地址
• 原路径拼接逻辑生成的是多级长路径（比如/abc/def），和现有独立访问的单片段路由（/abc、/def）不匹配
• 没有对全量路径做标准化拆分，无法准确识别最后一段纯文本项、可点击项的边界

实现步骤 #

1. 标准化路径拆分
   对传入的全量路径做预处理：先统一补全开头斜杠，再按斜杠拆分字符串，过滤掉空值得到纯路径片段数组。比如输入路径/abc/def/ghi/jkl，拆分后得到片段数组['abc', 'def', 'ghi', 'jkl']。
2. 按规则划分项的属性
   • 数组最后一个片段为当前页面标识，仅做纯文本展示，不绑定跳转逻辑
   • 数组里除最后一段外的所有片段，都是可点击的导航项，每个项的跳转地址直接拼接为/${片段值}，完全匹配现有hostname:port/abc、hostname:port/def这类独立路由的格式
3. 绑定跳转关系
   把每个可点击项的NavLink的to属性，替换为对应片段生成的单路径地址，不要直接绑定全局props.path。

修正后的核心代码逻辑 #

// 预处理传入的路径，生成拆分片段
const rawPath = props.path;
const normalizedPath = rawPath.startsWith('/') ? rawPath : `/${rawPath}`;
// 拆分有效片段，过滤空字符串
const pathSegments = normalizedPath.split('/').filter(Boolean);

return (
  <div className="bread-crumb">
    <ul className="bread-crumb-list">
      <li>
        <NavLink exact to="/homepage" activeClassName="active">
          <FontAwesomeIcon icon="home" color="#30343f" size="lg" />
        </NavLink>
      </li>
      <li className="bread-crumb-list-items">
        {pathSegments.map((segment, index) => {
          const isLast = index === pathSegments.length - 1;
          // 每个可点击项的独立跳转地址，匹配单片段路由规则
          const targetRoute = `/${segment}`;
          return (
            <span key={segment} className="crumb-item">
              {/* 非首个项前加分隔斜杠，还原abc/def/ghi的视觉效果 */}
              {index !== 0 && <span className="separator">/</span>}
              {isLast ? (
                // 最后一段纯文本，无跳转逻辑
                <p className="current-crumb">{segment}</p>
              ) : (
                <NavLink to={targetRoute} activeClassName="active">
                  {segment}
                </NavLink>
              )}
            </span>
          )
        })}
      </li>
    </ul>
  </div>
)

场景适配验证 #

• 当当前页面为ghi组件，传入的path为/abc/def/ghi时，拆分得到的片段为['abc','def','ghi']：点击abc跳/abc、点击def跳/def、ghi作为最后一段纯文本展示，完全匹配要求的abc/def/ghi视觉效果和跳转规则
• 当遇到/abc/def/ghi/jkl形式的路径时，拆分得到的片段为['abc','def','ghi','jkl']：最后一段jkl为纯文本，前面三个项分别跳对应独立路径，符合预先定义的拆解规则

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