next.js - Nextjs链接连接问题

Question

我遇到了 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;