Проблема с объединением ссылок Nextjs

Question

У меня проблема с компонентом Next / Link. Моя проблема возникает, когда пользователь переходит на страницу сведений о продукте. На домашней странице у меня есть 3 компонента ссылок, которые переводят пользователя либо на domain.com/headphones || domain.com/earphones || domain.com/speakers. Теперь на этих страницах пользователь может просмотреть желаемый продукт, который ведет на страницу с динамической информацией о продукте. На странице сведений о продукте у меня есть ровно 3 компонента ссылок с домашней страницы, которые изначально перенаправляют пользователя на / наушники || / наушники || /компьютерные колонки. Вот тут-то и проявляется ошибка. URL объединяется и приводит меня на страницу 404.

Если пользователь находится в domain.com/speakers/productId и нажимает, например, на компонент ссылки для наушников, URL-адрес теперь становится domain.com/speakers/headphones ... тогда как на самом деле он должен просто вернуть пользователя на domain.com/headphones..

Я попытался использовать опору replace в компоненте ссылки, а также router.push

Любые советы приветствуются

      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;

Answer 1

Проблема в том, что когда вы перенаправляете с помощьюheadphones, Next.js просто объединяет ссылки.

Вместо этого вам нужно передать целевой URL-адрес в href, например/headphones. Таким образом, вы можете перенаправить пользователя наdomain.com/headphones