NextJS Link 没有呈现锚标记

Question

我正在使用 React + NextJS，我正在尝试呈现产品列表，就像您在典型的电子商务类别页面上看到的一样。 每个产品都在一个p中，并且该p应该链接到适当的详细信息页面（因此它应该被一个锚点a标签包围）。

不幸的是，链接可以工作，但它们不会呈现实际的锚标记。 谁能解释我错过了什么？

场景 A：普通文本链接（按预期工作）

---

输入：

 <Link href="wherever">word holmes</Link>

output：

 <a href="wherever">word holmes</a>

场景 B：链接任意块

---

输入：

 <Link href="wherever"> <p>word holmes</p> </Link>

output：

 <p>word holmes</p>

所需的 output：

 <a href="wherever"><p>word holmes</p></a>

• <a />标签 go 在哪里？
• 将鼠标悬停在块上不会获得指针 cursor，但单击它确实会将您发送到href目标

场景 C：将我自己a添加到任何块中

---

输入：

 <Link href="wherever"> <a> <p>word holmes</p> </a> </Link>

output：

 <a href="wherever"><p>word holmes</p></a>

• 好的，这可行，但感觉很hacky..
• 为什么这行得通？ 这是“正确”的做法吗？

Answer 1

根据https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx如果子项是字符串，则会自动添加a标签。 否则它只会返回孩子。 所以在你的情况下，孩子是一个p标签，所以这就是返回的全部内容。 似乎您可以将其包装在a标签中，并且应该可以。

Answer 2

但应该有办法防止这种情况发生。 我认为这样做不是合法的方式......