Next.js面包屑中Link组件渲染显示[object Object]问题求助

你错误地将Next.js的Link组件（本质是React元素，属于对象类型）与字符串> 做了拼接操作。JavaScript在处理对象和字符串拼接时，会自动把对象转换为字符串[object Object]，这就是渲染结果异常的核心原因。

不要用字符串拼接的方式组合面包屑项，而是将每个面包屑项和分隔符都作为React节点来渲染。以下是两种Next.js常见路由体系下的实现代码：

Pages Router 版本 #

import Link from 'next/link';

const breadcrumbs = ['Home', "Men's Top", 'Winter Fur'];

export default function Breadcrumb() {
  return (
    <div className="breadcrumbs">
      {breadcrumbs.map((item, index) => {
        // 生成对应路由路径，可根据你的实际路由规则调整
        const path = index === 0 ? '/' : `/${breadcrumbs.slice(0, index + 1).join('/')}`;
        
        return (
          <span key={index}>
            <Link href={path}>{item}</Link>
            {/* 最后一项不显示分隔符 */}
            {index !== breadcrumbs.length - 1 && <span> > </span>}
          </span>
        );
      })}
    </div>
  );
}

App Router 版本（Next.js 13+） #

import Link from 'next/link';

const breadcrumbs = ['Home', "Men's Top", 'Winter Fur'];

export default function Breadcrumb() {
  return (
    <div className="breadcrumbs">
      {breadcrumbs.map((item, index) => {
        const path = index === 0 ? '/' : `/${breadcrumbs.slice(0, index + 1).join('/')}`;
        
        return (
          <span key={index}>
            <Link href={path}>{item}</Link>
            {index !== breadcrumbs.length - 1 && <span> > </span>}
          </span>
        );
      })}
    </div>
  );
}

• 用map遍历面包屑数组，每个项返回包含Link和可选分隔符的React元素
• 给每个遍历项添加唯一key属性，符合React列表渲染要求
• 根据项目实际路由规则生成Link的href路径（示例为简单拼接，可按需调整）
• 最后一个面包屑项不渲染分隔符

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