I'm using React + NextJS, and I'm trying to render a list of products, much like you'd see on a typical emerce 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?

I'm using React + NextJS, and I'm trying to render a list of products, much like you'd see on a typical emerce 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?

• javascript
• reactjs
• next.js

1 Answer 1

According to https://github./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.