gpt4 book ai didi

javascript - Next.js 链接和路径

转载 作者:行者123 更新时间:2023-12-05 03:40:21 25 4
gpt4 key购买 nike

我的页眉中有一个弹出菜单显示产品。单击第一个时,无论列表中的哪个,它都会正确导航到路径“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,
},
]

你能发现我做错了什么吗? :)

最佳答案

只需在href中的products前添加一个/即可:

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

您正在链接到相对路径,当您位于 /products 时,它将是 /products/products:

关于javascript - Next.js 链接和路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68174836/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com