href属性需要与history react模块结合使用

Question

我使用history React模块来管理会话历史，并有如下链接:

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

这会从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

有没有办法解决这个警告，而不把超链接变成一个按钮?
(考虑到存储库内部CSS的复杂性，将其转换为按钮将是大量的工作。)

如果我只添加href，如下所示，那么ESLint警告就解决了。但是history模块还能正常工作吗?

<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

如果使用href是必要的，可以这样做:href="javascript:void(0)"