Skip to content

react-router 里的 <Link> 标签和 <a> 标签有什么区别?

Posted on:2024年8月10日 at 17:05

对比 标签, Link 避免了不必要的重新渲染。

react-router是伴随着react框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用react-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转;

react-router 接管了其默认的链接跳转行为,与传统的页面跳转有区别的是,Link 的 “跳转” 行为只会触发相匹配的对应的页面内容更新,而不会刷新整个页面。

Link 跳转做了三件事情:

  • 有onclick那就执行onclick
  • click的时候阻止a标签默认事件
  • 根据跳转 href,用 history 跳转,此时只是链接变了,并没有刷新页面

而 a 标签就是普通的超链接了,用于从当前页面跳转到href指向的另一个页面(非锚点情况)。

原文转自:https://fe.ecool.fun/topic/eb1b05fa-d58b-4d72-bf81-3cd8bab13f55