react中link组件和传统a链接的区别

react路由的实现的a标签跟原生的a标签有什么区别

区别就是：link对这个a标签进行特殊的处理，绑定了自己的点击跳转视图的函数

先看Link点击事件handleClick部分源码

if (_this.props.onClick) _this.props.onClick(event);if (!event.defaultPrevented && // onClick prevented defaultevent.button === 0 && // ignore everything but left clicks!_this.props.target && // let browser handle "target=_blank" etc.!isModifiedEvent(event) // ignore clicks with modifier keys
) {event.preventDefault();var history = _this.context.router.history;var _this$props = _this.props,replace = _this$props.replace,to = _this$props.to;if (replace) {history.replace(to);} else {history.push(to);}
}

Link做了3件事情：

• 有onclick那就执行onclick
• click的时候阻止a标签默认事件（这样子点击< a href=" ">123就不会跳转和刷新页面）
• 取得跳转href（即是to），用history（前端路由两种方式之一，history & hash）跳转，此时只是链接变了，并没有刷新页面

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！