解决 react ＜a＞ 标签 href=“javascript:“ console warning 问题

项目场景：

我们在使用 a 标签时，href属性可以用于指定超链接目标的 URL，其值可以使任何有效文档的相对的或绝对的 URL，包括片段标识符和 JavaScript 代码段。用户选择了 a 标签中的内容，浏览器会尝试检索并展示 href 属性指定的 url 所表示的文档，或者 执行 JavaScript 表达式、方法和函数的列表。
若用户不想用 a 标签的跳转能力时，而要使用自己绑定的 click 事件，往往会通过插入 js 代码段的方式，设置 href 值为javascript:;或javascript:void(0) 以期达到 href 无跳转的效果。但是这样写代码会被 react 在控制台报如下错误：

console: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed “javascript:;”

---

问题解决：

网上很多方法都是这样说：

解决办法：属性值使用#或者#!

<a href="javascript:;" onClick={() => this.handleComment()}>123</a>
变成：
<a href="#!" onClick={() => this.handleComment()}>123</a>
或
<a href="#!" onClick={() => this.handleComment()}>123</a>

---

分析：

报错console确实是解决了，但是hash路由的跳转会导致请求两次接口，因为有参数是认为两次加载

---

解决方案：

<a href="javascript:;" onClick={() => this.handleComment()}>123</a>
变成
<a href="#!" onClick={(e) => {
	e.preventDefault();
	this.handleComment();
}}>123</a>

在react中，我们可以通过preventDefault来实现阻止跳转
这样解决了报错，同时也阻止href的默认事件！

---

慢慢积累，慢慢成长，慢慢蜕变。