在 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属性，因此最终锚标记从可访问性的角度来看是有效的。 向.eslintrc添加一个例外：

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

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

Answer 2

根据他们在https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md中的建议

您可以执行以下操作：根据 nextjs 文档调用带有标签的链接组件。 然后，您可以简单地使用 Link 组件中的 passHref 属性，并在标签中添加一个虚拟的 href 属性

像这样的东西：

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

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

Answer 3

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

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

Answer 4

你可以在“a”标签内写一些文本内容并用CSS（字体大小：0px或其他东西）隐藏它

Answer 5

也许您打算使用反引号而不是单引号来创建模板文字。 尝试以下操作：

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