How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?

Question

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!

Answer 1

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.