我的标题中有一个弹出菜单显示产品。单击第一个时,无论列表中的哪一个,它都会正确导航到路径“products/some-product”。但是,如果我已经在其中一个产品页面上,并且我正在尝试导航到另一个产品,它会添加"products/"
再次在 URL 中。例如。"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,
},
]
你能发现我做错了什么吗? :)
只需添加一个/
在...前面products
in the href
:
<Link href={`/products/${item.href}`}>
您正在链接到相对路径,当您打开时/products
, 将/products/products
:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)