href attribute is required in combination with history react module

Question

I use the history React module to manage the session history, and have links such as:

<a
    className="edit"
    onClick={() => {
        history.push(`/user/${this.props.match.params.id}/${i.slug}`);
    }}
>
    Edit User
</a>

This generates the following warning from ESLint:

The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

Is there a way to resolve this warning without turning the hyperlink into a button?
(given the complexity of the CSS going on inside the repository, converting it to a button would be a lot of work.)

If I just add href, like below, then the ESLint warning is solved. But can the history module then still do its job properly?

<a
    className="edit"
    href={`/user/${this.props.match.params.id}/${i.slug}`}   //extra line
    onClick={() => {
        history.push(`/user/${this.props.match.params.id}/${i.slug}`);
    }}
>
    Edit User
</a>

Answer 1

If using href is necessary you can do something like : href="javascript:void(0)"