Как исправить 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>

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

любая помощь была бы очень признательна!

17
eslint pa11y reactjs

3 ответов

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

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

кроме того, существует та же проблема с ответом на GitHub.

32

когда я импортирую его с другим именем, отличным от Link, eslint не жалуется.

import React from 'react';
import RLink from 'react-router-dom/Link';
import Button from 'material-ui/RaisedButton';

const Page = () => (
  <div>
        <h2>Test Header</h2>
        <RLink className="heading-btn" to="/to/something">
          <Button primary label="Button" />
        </RLink>
  </div>
);

export default Page;
-1

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

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