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

Question

In React App

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

leads to 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 meaning of this error? How to fix it?

Any help would be greatly appreciated!

Answer 1

The Link component generates an href attribute, so at the end the binding tag is valid in terms of accessibility. Add an exception to .eslintrc :

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

Also, there is the same issue with the answer on GitHub .

Answer 2

this will eliminate the warning

Answer 3

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

Answer 4

You might want to put backticks instead of single quotes to create a template literal. Try the following:

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