Next.js v12中如何让Link组件的href对象格式生效？

在Next.js v12中使用Link组件时，遇到了一个问题：当href使用对象格式时，鼠标悬停能看到正确的查询字符串，但点击后总是跳转到第一页；换成字符串模板格式则可以正常跳转。

问题分析 #

从代码来看，主要存在两个可能的原因：

1. 对象格式的query参数中，startDate、endDate未在组件的props类型定义中声明，也没有作为参数传入组件，可能存在undefined值，导致Next.js解析href对象时出现异常。
2. 字符串模板中使用的参数名是prodId，但对象格式中用的是id，参数名不一致可能干扰路由解析逻辑。

解决方案 #

1. 补充缺失的props参数

首先需要在组件的类型定义和参数接收中加入startDate和endDate：

type ProdProps = Pick<CardProps, 'background' | 'className'> & {
  name: string;
  prodNumber?: number;
  id: string;
  startDate: string | number; // 根据实际业务类型调整
  endDate: string | number; // 根据实际业务类型调整
};

export const ProdCard = ({ className, background, name, id, prodNumber = 0, startDate, endDate }: ProdProps) => (
  // ... 原有组件内容
);

2. 统一参数名

将对象格式中的id改为和字符串模板一致的prodId：

<Link
  href={{
    pathname: '/search',
    query: { page: 1, title: name, startDate, endDate, prodId: id },
  }}
  passHref
>

3. 处理可能的空值

如果startDate或endDate可能为空，需要设置默认值避免传入undefined：

query: {
  page: 1,
  title: name,
  startDate: startDate || '',
  endDate: endDate || '',
  prodId: id
}

修改后的完整代码示例 #

// ProdCard
type ProdProps = Pick<CardProps, 'background' | 'className'> & {
  name: string;
  prodNumber?: number;
  id: string;
  startDate: string;
  endDate: string;
};

export const ProdCard = ({ className, background, name, id, prodNumber = 0, startDate, endDate }: ProdProps) => (
  <div className={className}>
    <Link
      href={{
        pathname: '/search',
        query: { page: 1, title: name, startDate, endDate, prodId: id },
      }}
      passHref
    >
      <a>
        <Card className={className} background={background}>
          <div>{name}</div>
          <div>{prodNumber}</div>
        </Card>
      </a>
    </Link>
  </div>
);

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