React项目中 ESLint对a标签href属性警告解决方法

警告描述：

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/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

环境介绍：
通过React的官方教程 Create-React-App使用脚手架工具搭建的TS工程，然后添加了路由组件React-Router，样式组件Antd Design（简称antd）。
项目初始页面就有a链接存在

import logo from "logo.svg";
const Index = () => {return (<div className="homeIndex"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.tsx</code> and save to reload.</p><p>项目技术栈</p><p>React + React Hook + TypeScript + Sass + Antd + Axios + JWT + ESLint + jira-dev-tool</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></div>);
}
export default Index;

解决方法：
在更目录下package.json文件中添加如下代码

"eslintConfig": {"extends": "react-app","rules":{"jsx-a11y/anchor-is-valid":"off"}}

然后就可以消除警告，问题解决！

React项目中 ESLint对a标签href属性警告解决方法相关推荐

ESLint对a标签href属性警告解决方法
一.问题解决方法 1.环境介绍: 通过React的官方教程 Create-React-App使用脚手架工具搭建的工程,然后添加了路由组件React-Router,样式组件Antd Design(简称a ...
React中ESLint对a标签href属性警告
问题描述在React中如果使用了a标签,但是又没有给a标签的href属性赋值有效的链接地址,则ESLint会警告,看着很烦. The href attribute is required for a ...
前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
python编程django项目中ModuleNotFoundError: No module named ‘django.core.urlresolvers‘解决方法
文章目录遇到的问题解决方法参考遇到的问题在做<python编程-从入门到实践>书中的项目的时候,遇到No module named 'django.core.urlresolve ...
Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明: 当在渲染一个路由的过程中,需要尝试解析一个异步组件时发 ...
关于在react项目中img标签src的路径问题
关于在react项目中img标签src的路径问题公司要求开发一个静态页面,那这当然需要用img标签放些图片作为背景.之前我的做法是把images这个文件夹放在站点的子目录里面,然后通过站点ip加 ...
vue项目和react项目中禁止eslint
vue项目禁止eslint: react项目禁止eslint: 找到webpack.base.conf.js文件,然后注释掉里面红色框圈住的内容即可.
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...

React项目中 ESLint对a标签href属性警告解决方法

React项目中 ESLint对a标签href属性警告解决方法相关推荐

最新文章

热门文章