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

Question

在React app中

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

导致以下夹心错误

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

“链接”组件会生成有效的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

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

中的建议

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

像这样：

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

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

Answer 3

您只需在“ a”标签内编写一些文本内容，然后使用CSS（font-size：0px之类的东西将其隐藏

Answer 4

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

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