Daily-Interview-Question
Daily-Interview-Question copied to clipboard
第 85 题:react-router 里的 <Link> 标签和 <a> 标签有什么区别
如何禁掉 <a>
标签默认事件,禁掉之后如何实现跳转
从最终渲染的 DOM 来看,这两者都是链接,都是 <a>
标签,区别是:
<Link>
是 react-router 里实现路由跳转的链接,一般配合 <Route>
使用,react-router 接管了其默认的链接跳转行为,区别于传统的页面跳转,<Link>
的“跳转”行为只会触发相匹配的 <Route>
对应的页面内容更新,而不会刷新整个页面。
而 <a>
标签就是普通的超链接了,用于从当前页面跳转到 href 指向的另一个页面(非锚点情况)。
先看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="/abc">123</a>
就不会跳转和刷新页面) - 再取得跳转href(即是to),用history(前端路由两种方式之一,history & hash)跳转,此时只是链接变了,并没有刷新页面
- 禁掉 a 标签的默认事件,可以在点击事件中执行 event.preventDefault();
- 禁掉默认事件的 a 标签 可以使用 history.pushState() 来改变页面 url,这个方法还会触发页面的 hashchange 事件,Router 内部通过捕获监听这个事件来处理对应的跳转逻辑。
Link 的本质也是a 标签。只不过在Link 中禁用了 a 标签的默认事件,改用了history对象提供的方法进行跳转。
<a href="javascript: void 0" @click="$router.push(route)">
link会根据HASH的形态不同自动调整
- Router
history 跟 hash 模式混为一谈了吧...
之前遇到过一个bug, 在一个SPA里点击一个链接按钮后,redux里的数据都丢了。后来才发现,不知道谁写了一个a,没有用Link。相当于重新打开了一个SPA。
之前遇到过一个bug, 在一个SPA里点击一个链接按钮后,redux里的数据都丢了。后来才发现,不知道谁写了一个a,没有用Link。相当于重新打开了一个SPA。
你说的对,这才是最大的区别
-
<Link>
标签是react-router-dom
下的元素,<a>
是html原生标签 - 两者同样都会实现页面的跳转功能,
<Link>
会页面无刷新的跳转,而<a>
标签进行刷新 - 出现上面现象的原因
<a>
标签在涉及到path变化后浏览器的原生反应就是会刷新页面,虽然<Link>
渲染后默认也是a标签,在<Link>
内部的实现原理是通过history
进行了跳转,并且event.preventDefault()
阻止了a
标签的默认事件
<a onClick={ev=>{
ev.stopPropagation();
history.pushState(null,null,"/home");
}}>click me</a>