En Reaccionar aplicación

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

resultados en la siguiente eslint error

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

El Enlace componente de resultados en un válido atributo href.

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

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

Cualquier ayuda sería muy apreciada!

InformationsquelleAutor Eric the Red | 2017-12-18

3 Comentarios

  1. 43

    La Link componente genera href atributo, así que al final etiqueta de anclaje es válido a partir de la accesibilidad punto de vista. Agregar 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.

    • Yo entiendo eso, pero ¿por qué es el error que aparece en el primer lugar? La regla debe haber sido realizado para comprobar explícitamente este componente, derecho?
    • Parece que no, y tiene que ser declarado explícitamente que utiliza el componente algunos otros prop para representar href atributo. Estoy de acuerdo en que no es la respuesta completa a su pregunta.
    • Al tener Next.js esto le ayudará a cabo: "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["hrefLeft", "hrefRight"], "aspects": ["invalidHref", "preferButton"] }]
  2. -6

    Tal vez usted quiere poner comillas simples inclinadas en lugar de comillas simples para crear una plantilla literal. Intente lo siguiente:

    <Link to={`/person/${this.state.id}/edit`}>Edit</Link>
    • Sigue el mismo error :-/

Dejar respuesta

Please enter your comment!
Please enter your name here