ESLint rule for using <Link> without <a> child and ensuring passHref is used

[leerob]

Describe the feature you'd like to request

Until the RFC for <Link to="/route"> lands solving #5533, we should provide better guidance to users when they're doing something inaccessible.

#8207

Describe the solution you'd like

If you use a <Link> without an <a> child and don't use passHref=true, show a warning.

Describe alternatives you've considered

N/A

[paambaati]

Would this work with component libraries that expose custom components for anchor tags? For example, Chakra-UI has a <Link> tag that I use inside next/link tags with passHref.

[leerob]

@paambaati Yeah, that would be fine since it's using passHref.

<Link href="#" passHref>
  <ChakraLink>
    // something
  </ChakraLink>
<Link>

This should show an error when you try to do this:

<Link href="#">
  <ChakraLink>
    // something
  </ChakraLink>
<Link>

[karlhorky]

Yeah, I've been looking for this one for over a year now - at @upleveled our students will often use <Link> with some non-interactive element as a child (or sometimes, with a <button> with onClick, which also is problematic).

Up until now, we've just been reviewing their code and telling them to avoid this pattern, but we'd love to enable an ESLint rule! Especially when we get projects as large as this sometimes: https://github.com/uebriges/nextjstravelplaner

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.