如何使Link href对象工作？(Next.js v12)

iaqfqrcu 于 2022-12-12 发布在其他

关注(0)|答案(1)|浏览(120)

当我将href设为字符串时，链接可以工作，但当我将href设为对象时，链接就不工作了。当我将鼠标悬停在链接上时，我看到了带有正确querystring的链接。但它会将我带到第一页。

// ProdCard

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

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

代码中的链接不起作用。但如果我将其更改为

href={`/search?title=${name}&startDate=${startDate}&endDate=${endDate}&prodId=${id}`}

它将工作。当一个href被设置为对象时，我如何使它工作？

next.js

来源：https://stackoverflow.com/questions/74724206/how-to-make-the-link-href-object-work-next-js-v12

1条答案

按热度按时间

w8f9ii691#

这应该可以正常工作，很可能是你要重定向到的页面有问题。从你发布的内容来看，我没有看到startDate和endDate的定义。如果缺少值，你是否要重定向到第一个页面？
我用以下代码重新创建了它：

import Link from 'next/link'

export default function Home(){
    const name='world'
    const startDate='2021-01-01'
    const endDate='2021-01-01'
    const id = 1;
    return (
        <div>
            <Link
      href={{
        pathname: '/params',
        query: { page: 1, title: name, startDate,endDate, id },
      }}
      passHref
    >
        <button>Search</button>
    </Link>
        </div>
    )
}

Hovered link

赞(0）回复(0）举报 2022-12-12

我来回答

如何使Link href对象工作？(Next.js v12)

1条答案

相关问题

热门标签

最新问答