Nextjs链接连接问题答案

【问题标题】：Nextjs Link concatenate issueNextjs链接连接问题
【发布时间】：2022-10-20 23:13:32
【问题描述】：

我遇到了 Next/Link 组件的问题。当用户到达产品详细信息页面时，会出现我的问题。在主页中，我有 3 个链接组件将用户带到 domain.com/headphones || domain.com/耳机 || domain.com/speakers。现在，在这些页面中，用户可以查看所需的产品，从而将他们引导至动态产品详细信息页面。在产品详细信息页面中，我有来自主页的确切 3 个链接组件，它们最初将用户带到 /headphones || /耳机 || /扬声器。这就是错误发挥作用的地方。该网址连接并引导我进入 404 页面。

如果用户位于 domain.com/speakers/productId 并单击例如耳机链接组件，则 url 现在变为 domain.com/speakers/headphones.. 当它真的应该将用户带回 domain.com/headphones ..

我尝试在链接组件以及 router.push 中使用 replace 道具

非常感谢任何提示

const LinkCard = (props) => {
  return (
    <Link href={props.id}>
      <li id={props.id} className={styles.linkContainer}>
        <Image
          src={props.src}
          width={200}
          height={200}
          objectFit="cover"
          className={styles.img}
        />
        <h2>{props.title}</h2>
        <div>
          <p>Shop</p>
          <ArrowSVG />
        </div>
      </li>
    </Link>
  );
};

export default LinkCard;

【问题讨论】：

您能否展示props 包含的内容？我猜href 的分配错误。

标签： next.js next-link

【解决方案1】：

问题是当您使用headphones 重定向到时，Next.js 只是连接链接。

取而代之的是，您需要将目标 url 传递给 href，例如 /headphones。通过这种方式，您可以将用户重定向到domain.com/headphones

【讨论】：