#45react-router 中的 <Link> 标签与 <a> 标签的区别是什么?
本质也是 <a>
标签,只不过在 <Link>
中禁用了 <a>
标签的默认事件,改用了 history
对象提供的方法进行跳转。区别是:
<Link>
是react-router
中实现的路由跳转链接,一般配合<Router>
使用,react-router
接管了其默认的链接跳转行为,区别于传统的页面跳转,<Link>
的“跳转”行为只会触发相匹配的<Route>
对应的页面内容更新,而不会刷新整个页面。- 有
onClick
则执行onClick
click
时阻止<a>
标签默认事件(点击<a href="/abc">test</a>
就不会跳转和刷新页面)- 再取得跳转
href
(即是to
),用history
(前端路由两种方式之一,history
&hash
)跳转,此时只是链接变了,并没有刷新页面
- 有
<a>
标签就是普通的超链接,用于从当前页面跳转到href
指向的另一个页面(非锚点情况)