eslint<a>内部</a>失败<Link><a>在反应</a>

Question

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.

Answer 1

Add this to .eslintrc.json

"jsx-a11y/anchor-is-valid": [ "error", {
        "components": [ "Link" ],
        "specialLink": [ "hrefLeft", "hrefRight" ],
        "aspects": [ "invalidHref", "preferButton" ]
    }]

This setting control the error. I hope this helps

Answer 2

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

如果您使用的是 vscode，只需右键单击问题中的警告，您可以检查是否仅针对该 lino 或整个文件禁用

Answer 3

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

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