IT技术 - 在 React 中使用 Link 组件时，如何修复 jsx-a11y/anchor-is-valid？ - 吾爱随笔录

IT技术 reactjs eslint

2021-05-21 06:46:57

在 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>

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

任何帮助将不胜感激！

4个回答

该Link组件生成href属性，因此从可访问性的角度来看，最终锚标记是有效的。添加一个例外到.eslintrc：

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

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

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

像这样的东西：

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

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

你可以在 "a" 标签内写一些文本内容并用 CSS (font-size:0px 或其他东西) 隐藏它

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

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

其它你可能感兴趣的问题