我们在做React项目时，经常用到a标签做一些跳转动作，但是每次eslint都要提示 jsx-a11y/anchor-is-valid这段代码，我们可以通过/* eslint-disable jsx-a11y/anchor-is-valid */把这个规则屏蔽掉，但是显然不够优化，那到底是什么原因导致的呢？

<a onClick={() => history.push('https://baidu.com') }>
  点击
</a>

接下来我们打开以下这个链接，它详细的讲解了导致该现象的原因，以及我们该如何更好的处理这个问题。eslint-plugin-jsx-a11y/anchor-is-valid.md at 4abc751d87a8491219a9a3d2dacd80ea8adcb79b · jsx-eslint/eslint-plugin-jsx-a11y · GitHubzStatic AST checker for a11y rules on JSX elements. - eslint-plugin-jsx-a11y/anchor-is-valid.md at 4abc751d87a8491219a9a3d2dacd80ea8adcb79b · jsx-eslint/eslint-plugin-jsx-a11yhttps://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md

文中有一段话是这样描述的：

1. a标签其实是一个超链接，而href是一个必不可少的属性，并且href应该包含一个有效的URL（JavaScript 字符串、空值或仅使用）

2. 一个a 标签如果没有href属性，实际上与一个 <span>是没什么不同的

 

解决方案：

1. 可以使用一个其他html元素来代替a标签触发点击交互（当然样式需要自己修改下）

2. 使用Link标签

import { Link }  from 'react-router-dom'


<Link to="https://baidu.com">点击</Link>