reactjs - plugin - react install eslint

¿Cómo puedo reparar jsx-a11y/anchor-is-valid cuando uso el componente Link en React?

Question

En una aplicación React

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

da como resultado el siguiente error de eslint

The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

El componente de enlace da como resultado un atributo href válido.

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

¿Cuál es el punto de este error? ¿Cómo puedo solucionar esto?

Cualquier ayuda sería muy apreciada!

Answer 1

El componente Link genera el atributo href por lo que la etiqueta de anclaje final es válida desde el punto de vista de la accesibilidad. Agregue una excepción a .eslintrc :

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

Además, existe el mismo problema con una respuesta en GitHub .

Answer 2

Tal vez quisiste poner comillas invertidas en lugar de comillas simples para crear una plantilla literal. Intenta lo siguiente:

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