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

标签 reactjs eslint

在 React 应用程序中

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

导致以下 eslint 错误

anchor 需要 href 属性。提供有效的可导航地址作为 href 值 jsx-a11y/anchor-is-valid

链接组件产生有效的 href 属性。

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

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

任何帮助将不胜感激!

最佳答案

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

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

此外,GitHub 上的答案也存在同样的问题.

关于reactjs - 在 React 中使用 Link 组件时如何修复 jsx-a11y/anchor-is-valid 问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47875730/

相关文章:

javascript - 如何在 React 中关闭模态时添加过渡以及如何在模态外单击时关闭?

reactjs - 如何从 props 中破坏 `data-*` (连字符大小写)属性?

typescript - TSLint中的 `extends`和 `rulesDirectory`有什么区别

javascript - Reactjs模块构建错误

reactjs - 如何修复 jsx 结束标签 : "unclosed regular expression"? 上的 linting 错误

JavaScript 异步 curry 函数 ES6

javascript - 未处理的拒绝 (TypeError) : respo. json 不是函数

reactjs - 在 React 中关注(滚动到)一个 DIV 元素

vue.js - 如何使用 eslint 在所有导入中强制使用 .vue 扩展名?

javascript - 如何在不使用 for 循环的情况下迭代 FormDataentries() 数组