52

In a React app

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

results in the following eslint error

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

The Link component results in a valid href attribute.

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

What is the point of this error? How do I fix this?

Any help would be greatly appreciated!

José Luis
  • 1,816
  • 8
  • 24
  • 26
Eric the Red
  • 5,364
  • 11
  • 49
  • 63

5 Answers5

75

The Link component generates href attribute so in the end anchor tag is valid from the accessibility point of view. Add an exception to .eslintrc:

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

Additionally, there is the same issue with a answer on GitHub.

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
  • I get that, but why is the error reported in the first place? The rule must have been made to explicitly check this component, right? – Eric the Red Dec 18 '17 at 20:50
  • @ErictheRed Seems like it doesn't and it has to be explicitly stated that component uses some other prop to render `href` attribute. I agree that's not the full answer to your question. – Tomasz Mularczyk Dec 18 '17 at 21:03
  • 25
    When having Next.js this will help you out: ```"jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["hrefLeft", "hrefRight"], "aspects": ["invalidHref", "preferButton"] }]``` – Lauris Kuznecovs Feb 26 '19 at 10:59
  • Thanks, @LaurisKuznecovs your answer worked for me – Dijiflex Jan 23 '21 at 18:39
3

As per they suggest in the https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

you can do the following: call the link component with tag inside of it, as per in nextjs docs. then, you can simply use the passHref prop in the Link component, and add a dummy href attribute in the tag

Something like this:

<Link to={`/person/${person.id}`} passHref> <a href="replace">Person Link</a></Link>

It should do the trick :) The eslint ignore rules suggested above didn't work for me, btw, but this solution did, and it's one of the recommended ones in the docs about the rule.

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
  • Nice answer. Works a treat. FYI the exact location where they talk about this wrt NextJs is here https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md#case-i-use-nextjs-and-im-getting-this-error-inside-of-links – Ben Smith Jan 11 '23 at 11:50
-1

adding this in my .eslintrc file in setting > rules fixed the issue

"jsx-a11y/anchor-is-valid": [
      "off",
      {
        "components": ["Link"],
        "specialLink": ["hrefLeft", "hrefRight"],
        "aspects": ["noHref", "invalidHref", "preferButton"]
      }
    ]
vedanth bora
  • 634
  • 4
  • 7
-14

you can just write some text content inside the "a" tag and hide it with CSS (font-size:0px or something

Roni Chabra
  • 1
  • 3
-15

Perhaps you meant to put backticks instead of single-quotes in order to create a template literal. Try the following:

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