Eslint-plugin-jsx-a11y: jsx-a11y/anchor-is-valid

[inferusvv]

I have a Link component:

class Link extends React.Component {
  render() {
    const { to, children, ...props } = this.props;
    return (
      <a href={to} {...props} onClick={this.handleClick}>
        {children}
      </a>
    );
  }
}

And use it like this:

<Link to="/somewhere">Link</Link>

But I am getting ESLint error The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

P.S. This Link components is a part of react-starter-kit by kriasoft

[ljharb]

You'll have to provide settings that denote to as a "specialLink" property; see the rule docs.

[skube]

FYI, here's a link to the rules docs

[bstaruk]

This worked for me:

.eslintrc

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

Sorry to necro a closed issue, but this came up when searching around to debug a similar issue I had. This was the solution I came up with, figured I'd share it for future debuggers.

[gknapp]

It seems like "to" should be specialLink by default here.

[jasonmorita]

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

We needed a click handler that opened a modal, where the a was semantic.

[ljharb]

If it’s an a, it should always have an href as a noJS fallback.

[ljharb]

Or put another way - if it doesn’t have a url, it’s not semantically a link.