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

Question

In a React app

Person Link

results in the following eslint error

The href attribu

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.

Answer 2

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>

Answer 3

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