Next.js面包屑点击无响应求助：Link包裹li无法跳转

核心问题分析 #

你的代码存在两个关键问题导致点击失效：

1. Next.js Link组件用法不符合版本规范：不同版本的Next.js（Pages Router/App Router）对Link组件的写法要求不同，当前写法不匹配对应版本的规则。
2. 当前页面包屑冗余包裹Link：当前页面的面包屑无需跳转逻辑，包裹Link后点击无响应，同时也不符合无障碍访问规范。

修复方案 #

1. 修正BreadcrumbItem组件 #

根据你使用的Next.js版本选择对应代码：

若使用Next.js 13+ App Router（app目录）

import Link from "next/link";

const BreadcrumbItem = ({ children, href, isCurrent, ...props }) => {
  // 当前页面包屑：无需跳转，添加无障碍标识
  if (isCurrent) {
    return (
      <li {...props} aria-current="page">
        {children}
      </li>
    );
  }

  // 非当前页：直接用Link包裹文本，无需额外a标签
  return (
    <li {...props}>
      <Link href={href}>{children}</Link>
    </li>
  );
};

export default BreadcrumbItem;

若使用Next.js Pages Router（pages目录）

import Link from "next/link";

const BreadcrumbItem = ({ children, href, isCurrent, ...props }) => {
  if (isCurrent) {
    return (
      <li {...props} aria-current="page">
        {children}
      </li>
    );
  }

  // Pages Router中Link直接包裹原生a标签即可，无需passHref
  return (
    <li {...props}>
      <Link href={href}>
        <a>{children}</a>
      </Link>
    </li>
  );
};

export default BreadcrumbItem;

2. 优化Layout中的逻辑 #

避免给当前页面包屑传递无效的跳转链接：

// components/layout.tsx
return (
  <>
    <Breadcrumb>
      <BreadcrumbItem 
        isCurrent={router.pathname === "/"} 
        // 首页为当前页时，无需传递href
        {...(router.pathname !== "/" && { href: "/" })}
      >
        Home
      </BreadcrumbItem>
      {breadcrumbs &&
        breadcrumbs.map((breadcrumb) => (
          <BreadcrumbItem
            key={breadcrumb.href}
            // 非当前页才传递href
            {...(breadcrumb.isCurrent ? {} : { href: breadcrumb.href })}
            isCurrent={breadcrumb.isCurrent}
          >
            {breadcrumb.label}
          </BreadcrumbItem>
        ))}
    </Breadcrumb>
  </>
)

3. 排查CSS干扰 #

检查面包屑相关样式，确保没有设置：

pointer-events: none;

该属性会阻止元素接收点击事件；同时确认没有其他绝对定位的元素（如导航栏）覆盖在面包屑上方。

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