我有一个弹出菜单在我的标题显示产品。当点击第一个时,无论列表中的哪一个,它都会正确导航到路径“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,
},
]
你能看出我哪里做错了吗?:)
1条答案
按热度按时间mfpqipee1#
只需在
href
中的products
前面添加一个/
:你正在链接到相对路径,当你在
/products
上时,它将是/products/products
: