Как я могу исправить jsx-a11y/anchor-is-valid при использовании компонента Link в React?

В приложении 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>

В чем смысл этой ошибки? Как это исправить?

Любая помощь будет принята с благодарностью!

Ответы

Компонент Link генерирует атрибут href поэтому в конце тег привязки действителен с точки зрения доступности. Добавьте исключение в .eslintrc:

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

Кроме того, есть такая же проблема с ответом на GitHub.

это избавит от предупреждения

Вы можете просто написать текстовое содержимое внутри тега "a" и скрыть его с помощью CSS (font-size: 0px или что-то

Возможно, вы хотели поставить backticks вместо одиночных кавычек, чтобы создать шаблонный литерал. Попробуйте следующее:

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