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

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

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

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

if (_this.props.onClick) _this.props.onClick(event);

if (!event.defaultPrevented && // onClick prevented default
    event.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</ a>就不会跳转和刷新页面)
  • 取得跳转href(即是to),用history(前端路由两种方式之一,history & hash)跳转,此时只是链接变了,并没有刷新页面
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页