第 85 题：react-router 里的 <Link> 标签和 <a> 标签有什么区别

[DreamLee1997]

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标签默认事件（这样子点击123就不会跳转和刷新页面）
• 再取得跳转href（即是to），用history（前端路由两种方式之一，history & hash）跳转，此时只是链接变了，并没有刷新页面

总的来说Link：

• 禁掉 a 标签的默认事件，可以在点击事件中执行 event.preventDefault();
• 禁掉默认事件的 a 标签 可以使用 history.pushState() 来改变页面 url，这个方法还会触发页面的 hashchange 事件，Router 内部通过捕获监听这个事件来处理对应的跳转逻辑。

从最终渲染的 DOM 来看，这两者都是链接，都是 标签，区别是：

是 react-router 里实现路由跳转的链接，一般配合 使用，react-router 接管了其默认的链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的 对应的页面内容更新，而不会刷新整个页面。 而 标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）。