Next.js链接和路径

vmjh9lq9  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(232)

我有一个弹出菜单在我的标题显示产品。当点击第一个时,无论列表中的哪一个,它都会正确导航到路径“products/some-product”。但是如果我已经在一个产品页面上,并且我试图导航到另一个产品,它会在URL中再次添加"products/"。例如"products/products/some-product"
我使用的是Next.js 11和Link。
下面是我处理带导航的产品列表的代码的一部分:

<div>
{products.map((item) => (
    <Link href={`products/${item.href}`}>
    <a
        key={item.name}
        >
        <div>
        <item.icon
            aria-hidden="true"
        />
        </div>
        <div>
        <p>
            {item.name}
        </p>
        <p>
            {item.description}
        </p>
        </div>
    </a>
    </Link>
))}
</div>

我有一个menuData.jsx组件来跟踪我的所有产品,然后将其导入到上面的文件中。下面是来自menuData.jsx文件的一个示例:

export const products = [
  {
    name: "some-product",
    description:
      "Some description",
    icon: CheckIcon,
  },
]

你能看出我哪里做错了吗?:)

mfpqipee

mfpqipee1#

只需在href中的products前面添加一个/

<Link href={`/products/${item.href}`}>

你正在链接到相对路径,当你在/products上时,它将是/products/products

相关问题