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
hreftarget
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?