react-router 里的 routerLink标签和a 标签有什么区别

最新推荐文章于 2023-12-12 14:49:33 发布

distantimg

最新推荐文章于 2023-12-12 14:49:33 发布

阅读量850

点赞数

分类专栏： vue 面试，源码文章标签： vue html event 交换机 javascript

本文链接：https://blog.csdn.net/u012138854/article/details/113032259

版权

vue 面试，源码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨了在前端开发中，Link组件处理点击事件的方式。Link组件首先执行用户定义的onClick事件，然后阻止默认的a标签行为，避免页面刷新。接着，它利用history API进行前端路由跳转，实现页面URL变化而不实际刷新。此过程对于单页应用（SPA）的流畅用户体验至关重要。

摘要由CSDN通过智能技术生成

先看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);
          }
        }