I want to use a <Link /> with no content inside of it within my app, but for whatever reason, if I don't pass any content to it I get the "multiple children" error - when in fact quite the opposite is occurring. [See the error here]
So, how would I get the following code to work without doing any funky workarounds? The documentation doesn't seem to mention anything about it.
<Link href="/example"></Link>
Just in case you're wondering why I'm doing this, when I'm processing clickable background-image, instead of putting the link on the outside of the element with that property, I put it on the inside and make it take up the entire parent element - as opposed to breaking the structure of the page with an inline element (and potentially unnecessary extra HTML and CSS).
Thanks.
React Fragments can solve the problem; they don't add extra HTML elements. You could do something like this (make sure to import React):
<Link href="/example">
<React.Fragment></React.Fragment>
</Link>
Or simply:
<Link href="/example"><></></Link>
This way you're passing exactly "one child" to <Link> that returns nothing.
You have to pass an anchor element as children and passHref as prop of the Link element.
<Link href="/example" passHref>
<a />
</Link>