javascript - NextJS Link 没有呈现 anchor 标记

Question

我正在使用 React + NextJS，我正在尝试呈现产品列表，就像您在典型的电子商务类别页面上看到的一样。每个产品都在 p ，以及 p应该链接到相应的详细信息页面(因此它应该被一个 anchor a 标签包围)。

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

场景 A:普通文本链接(按预期工作)

---

input:

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

output:

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

场景 B:链接任意 block

---

input:

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

output:

<p>word holmes</p>

desired output:

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

• <a /> 去哪儿了标记去？？
• 将鼠标悬停在 block 上不会获得指针光标，但单击它会转到 href目标

场景 C:添加我自己的 a到任何 block

---

input:

<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 如果子元素是字符串，则会自动添加标签。否则它只会返回 child 。所以在你的情况下， child 是一个 p 标签，所以这就是返回的所有内容。似乎您可以将其包装在 a 标记中，这应该可以工作。