【问题标题】:difference between html tag "/href" and navlink or Linkhtml标签“/href”和navlink或Link之间的区别
【发布时间】:2023-04-02 23:45:01
【问题描述】:

html 标签 "/href" 和 react-router 提供的用于导航页面的 navlink 有什么区别?我可以同时使用这两种方法来将页面导航到不同的 URL,那么为什么需要引入 Navlink 或 Link?

【问题讨论】:

标签: reactjs react-redux react-navigation react-router-v4


【解决方案1】:

href 属性将触发页面刷新,从而重置应用程序状态。但是 react-router 的链接和导航链接不会触发页面刷新。由于 React 大部分时间用于创建单页应用程序,因此请确保在使用路由时选择 Link 或 Navlink

【讨论】:

  • 但是 navlink 和 link 最终都会呈现一个常规的 a 标签?
  • 是的,当你在浏览器中使用inspect element检查渲染页面时,你会发现一个a标签。
  • 那么为什么点击它时 (a)nchor 标签不会导致浏览器导航?
  • 这是因为a 标记附加了一个事件,该事件覆盖了默认行为。它发生在幕后。当您检查检查元素时,某些浏览器会显示与它们相关联的事件的标签。
  • 我检查了一个 onclick 事件的标签,有一个,但它是 oop,如果我删除它没有效果,也许事件在 dom 层次结构中附加在更高的位置
【解决方案2】:

如果我们要使用锚元素(例如 href)创建链接,单击它们会导致整个页面重新加载。 React Router 提供了一个<Link> 组件来防止这种情况发生。单击<Link> 时,URL 将被更新,呈现的内容将发生变化,而无需重新加载页面。所以基本上总结一下 react提供的navlink/链接不刷新页面,而href刷新页面

【讨论】:

    【解决方案3】:

    当你需要在 active 上使用 style 或 class 属性时,你可以使用 navlink

    让我们看例子:

    链接

    允许用户浏览您的应用程序的主要方式。将使用正确的 href 呈现完全可访问的锚标记。

    <Link to="/">Home</Link>
    

    导航链接

    一个特殊版本,当它与当前 URL 匹配时,它将向呈现的元素添加样式属性。

    <NavLink to="/" activeClassName="active">Home</NavLink>
    

    【讨论】:

      猜你喜欢
      • 2018-12-08
      • 1970-01-01
      • 2020-05-20
      • 2011-03-24
      • 2020-09-28
      • 2014-10-31
      • 2014-06-13
      • 2012-03-05
      • 2010-09-24
      相关资源
      最近更新 更多