Add back passHref to the new next/link component

[mahish]

Describe the feature you'd like to request

Some components might be rendered as an a tag if href attribute is provided eg. https://developer.microsoft.com/en-us/fluentui#/controls/web/button#row621-15 . This is problem in Next.js v13.

In Next.js v12, this…

<Link href={url} passHref>
  <DefaultButton text={text} />
</Link>

…rendered like this:

<a className="button" href="/">Home</a>

In Next.js v13 this is not true. It is rendered like this:

<a href="/"><button className="button" >Home</button></a>

ThelegacyBehavior prop is required to make the passHref behaviour work again. What are plans with this?

Describe the solution you'd like

Add back passHref prop to next/link so this…

<Link href={url} passHref>
  <DefaultButton text={text} />
</Link>

… is rendereded like this:

<a className="button" href="/">Home</a>

Describe alternatives you've considered

The codemod for next/link provided the legacyBehavior.

[grefrit]

I completely agree. I don't understand what's the point of passing legacyBehavior to every link that has passHref. It's impossible to get rid of passHref anyway, because of UI libraries and so on.

[CrocoDillon]

This seems like a bug to me, since passHref should work even if legacyBehavior is false.

next.js/packages/next/client/link.tsx

Lines 661 to 665 in ab328c6

	if (
	!legacyBehavior ||
	passHref ||
	(child.type === 'a' && !('href' in child.props))
	) {

This code acknowledges child can be an a element, and then (if not legacy) it still renders its own a wrapper.

Even if child is not an a element, passHref should never render the a wrapper imho.

[FlorianCassayre]

This definitely looks like a bug: the passHref is supposed to "pass the href", but it is not the case in the newer versions. The so-called "legacy behavior" needs to be brought back.

[timneutkens]

This is not a bug, the default was changed to always render the a element. passHref has no effect on the new link because it was a result of the limitations at the time where any element could be below it. It's not longer required as the element below is always a. If you don't want to render the a element you'll want to reach for useRouter() instead / create a custom component.

legacyBehavior exists to provide backwards compat with applications that used the previous defaults.

[mahish]

Hi Tim, thanks for your response. To be precise, I did not report this as a bug but feature:) Anyway, I'm not sure if I understand you correctly:

If you don't want to render the a element you'll want to reach for useRouter() instead / create a custom component.

Actually, I want to render <a> HTML element! Dont you think HTML element is something else than React component? The original point is that there are such React components which decides what HTML tag is rendered based on a prop value. In the provided example you can see DefaultButton FluentUI React component which is rendered as <a> tag only when href prop is provided to it. This is not possible with the current Link implementation. I do not think the workaround with useRouter you proposed is a viable option to be honest.

Here, I prepared sample https://stackblitz.com/edit/nextjs-df5sau?file=pages/index.js

[thedaviddias]

I have spent a good amount of time trying to figure out why passing passHref wasn't working when building custom Link component with Styled Components. Even I followed what is in the current documentation, passHref without legacyBehavior does not seems to work. Is the documentation wrong or do we have a bug @timneutkens?

[FlorianCassayre]

That's what we have been saying all along.

By the way, I am now using VikeJS.