html标签“/href”和navlink或Link之间的区别

Posted 2023-02-22

【中文标题】html标签“/href”和navlink或Link之间的区别

【英文标题】：difference between html tag "/href" and navlink or Link

【发布时间】：2019-05-20 14:56:43

【问题描述】：

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

【问题讨论】：

看看这个：- ***.com/questions/43087007/…

Navlink 或 Link 都是 react Routing 的一部分...而 href 是 HTML 属性

【参考方案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>