在 React 中使用 Link 组件时如何修复 jsx-a11y/anchor-is-valid？

Question

在 React 应用程序中

<Link to={`/person/${person.id}`}>Person Link</Link>

导致以下eslint错误

The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

Link 组件生成有效的 href 属性。

<a href="#/person/2">Person Link</a>

这个错误有什么意义？我该如何解决这个问题？

如有任何帮助，我们将不胜感激！

Answer 1

Link 组件生成 href 属性，因此最终锚标记从可访问性的角度来看是有效的。将 an exception 添加到 .eslintrc:

{
  "rules": {
    "jsx-a11y/anchor-is-valid": [ "error", {
      "components": [ "Link" ],
      "specialLink": [ "to" ]
    }]
  }
}

此外，GitHub 上的答案也存在同样的问题。

Answer 2

也许您打算用反引号代替单引号来创建模板文字。请尝试以下操作：

<Link to={`/person/${this.state.id}/edit`}>Edit</Link>

Answer 3

你可以在"a"标签里面写一些文字内容，然后用CSS隐藏它（font-size:0px之类的

Answer 4

按照他们在 https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

中的建议

您可以执行以下操作：根据 nextjs 文档，调用带有标签的 link 组件。然后，您可以简单地在 Link 组件中使用 passHref 属性，并在标签

中添加一个虚拟 href 属性

像这样：

<Link to={`/person/${person.id}`} passHref> <a href="replace">Person Link</a></Link>

它应该可以解决问题:) 上面建议的 eslint 忽略规则对我不起作用，顺便说一句，但是这个解决方案确实有效，而且它是关于该规则的文档中推荐的规则之一。

Answer 5

将此添加到我的 .eslintrc 文件中的设置 > 规则解决了问题

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

在 React 中使用 Link 组件时如何修复 jsx-a11y/anchor-is-valid？

How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?

reactjs

eslint