Reactjs 在React中使用链接组件时，如何修复jsx-a11y/锚点是否有效？

在React应用程序中

个人链接

导致以下eslint错误

锚点上需要href属性。提供有效的可导航地址，因为href值jsx-a11y/anchor有效

链接组件生成有效的

href

属性

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

---

任何帮助都将不胜感激

链接组件生成

href

属性，因此从可访问性的角度来看，端锚标记是有效的。添加到

.eslintrc

：

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

---

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

也许您的意思是为了创建一个模板文本而放回勾号而不是单引号。请尝试以下操作：

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

编辑

您只需在“a”标记中写入一些文本内容，然后使用CSS（字体大小：0px或类似于他们在

您可以执行以下操作： 按照nextjs文档中的说明，调用包含标记的链接组件。 然后，您只需在链接组件中使用passHref属性，并在标记中添加一个虚拟href属性

大概是这样的：

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

它应该做到这一点：）

---

顺便说一句，上面建议的eslint ignore规则对我不起作用，但这个解决方案确实起作用，而且它是关于该规则的文档中推荐的解决方案之一。

我明白了，但为什么要首先报告错误？必须制定规则来明确检查此组件，对吗？@Erictered似乎没有，并且必须明确说明组件使用其他一些道具来呈现

href

属性。我同意这并不是你问题的完整答案。当使用Next.js时，这将帮助你：

“jsx-a11y/anchor是有效的”：[“error”、{“components”：[“Link”]、“specialLink”：[“hrefLeft”、“hrefRight”]、“aspects”：[“invalidHref”、“preferButton”}]

谢谢，@LaurisKuznecovs你的答案对我有用