Next.js 链接和路径

Question

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

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

Answer 1

只需在/前面添加一个：productshref

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

您正在链接到相对路径，当您打开时/products，该路径将是/products/products：