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