React Router v5面包屑回退页面时应用卡顿报错求助

问题分析 #

你的代码存在两个核心问题：

1. 悬停URL显示异常：Dashboard的Link未使用to属性，而是通过onClick调用history.push，导致浏览器无法识别链接目标路径，悬停时不会显示正确的/。
2. 点击卡顿报错：一是直接混用Link和Breadcrumb的结构，不符合react-bootstrap的组件嵌套规范；二是手动调用history.push可能触发不必要的路由重复跳转，引发组件渲染异常。

修复后的代码 #

import React from "react";
import { Breadcrumb } from "react-bootstrap";
import { Link, withRouter } from "react-router-dom";

const Breadcrumbs = (props) => {
  const { location: { pathname } } = props;

  // 拆分路径并过滤空字符串
  const pathnames = pathname.split("/").filter(Boolean);

  return (
    <Breadcrumb aria-label="breadcrumb">
      {/* Dashboard项：使用Link的to属性，嵌套在Breadcrumb.Item中 */}
      <Breadcrumb.Item>
        <Link to="/">Dashboard</Link>
      </Breadcrumb.Item>

      {/* 遍历路径生成面包屑项 */}
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
        const isLast = index === pathnames.length - 1;

        if (isLast) {
          // 最后一项设为active，无需链接
          return (
            <Breadcrumb.Item key={routeTo} active>
              {name}
            </Breadcrumb.Item>
          );
        }

        // 非最后一项：使用Link的to属性，嵌套在Breadcrumb.Item中
        return (
          <Breadcrumb.Item key={routeTo}>
            <Link to={routeTo}>{name}</Link>
          </Breadcrumb.Item>
        );
      })}
    </Breadcrumb>
  );
};

export default withRouter(Breadcrumbs);

关键修改点 #

• 正确使用Link组件：所有跳转项都通过Link的to属性指定路径，替代手动history.push，既保证悬停时显示正确URL，又利用React Router的内置路由优化。
• 符合react-bootstrap结构规范：所有面包屑项都嵌套在Breadcrumb.Item中，避免组件渲染异常。
• 优化key值：使用routeTo作为key，避免因路径名称重复导致的key冲突问题。
• 标记当前页：最后一项设置active属性，符合面包屑的交互规范，同时无需添加链接。

内容的提问来源于stack exchange，提问作者github.arief