#45react-router 中的 <Link> 标签与 <a> 标签的区别是什么?

lencxlencx2022/06/15

本质也是 <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 指向的另一个页面(非锚点情况)

License Copyright © 2022-present lencx