'eslint fails on <a> inside <Link> in React

I got Next.js React app. Here is my code:

<Link href="/foo">
  <a>Bar</a>
</Link>

eslint tells me this: The href attribute is required for an anchor to be keyboard accessible. But Next.js wants me to inculde an a tag inside my Link. Ho do I configure eslint properly or change my code so that it doesn't warn me about this? Aside from completely disabling this rule of course.

Solution 1:^[1]

eslint-disable-next-line jsx-a11y/anchor-is-valid

if you are using vscode just right click on the warning in PROBLEMS and you can check if disable only for that lino or the entire file

Solution 2:^[2]

For NextJS adding "react-app" to extends helped.

"extends": [
    ...
    "react-app"
],

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Drusto
Solution 2	Junius L.

'eslint fails on <a> inside <Link> in React

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]