NextJS Link 没有呈现锚标记

Question

I'm using React + NextJS, and I'm trying to render a list of products, much like you'd see on a typical ecommerce category page. Each product is in a p , and that p should link to the appropriate detail page (so it should be surrounded by an anchor a tag).

Unfortunately, the links work but they don't render actual anchor tags. Can anyone explain what I'm missing?

Scenario A: a normal text link (works as expected)

---

input:

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

output:

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

Scenario B: linking a block of whatever

---

input:

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

output:

 <p>word holmes</p>

desired output:

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

• where'd the <a /> tag go??
• mousing over the block does not get a pointer cursor, but clicking it does send you to the href target

Scenario C: adding my own a to the block of whatever

---

input:

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

output:

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

• ok this works, but it feels hacky..
• why does this work? Is this the "right" way to do it?

Answer 1

According to https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx the a tag is added automatically if the child is a string. Otherwise it just returns the child. So in your case the child is a p tag, so that's all that is returned. Seems like you could just wrap that in an a tag and that should work.

Answer 2

But there should be a way to prevent this. I don't think that it is legitimate way of doing this...