我正在使用 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..
- 为什么会这样?这是“正确”的做法吗?
最佳答案
根据https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx a
如果子元素是字符串,则会自动添加标签。否则它只会返回 child 。所以在你的情况下, child 是一个 p
标签,所以这就是返回的所有内容。似乎您可以将其包装在 a
标记中,这应该可以工作。
关于javascript - NextJS Link 没有呈现 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67911391/