Next.js 链接和路径

Question

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

你能看出我做错了什么吗？ :)

Answer 1

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

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

您正在链接到相对路径，当您在 /products 上时，它将是 /products/products：