反应路由器 v4<navlink> 对比<link>好处</navlink>

Question

除了在 NavLink 上设置“activeClassName”和“activeStyle”的能力之外，在您网站上的非导航元素（即不是 header 或页脚中的主导航）上创建指向其他路线的链接时，是否有任何理由使用NavLink over Link不需要活动状态/类？

Answer 1

官方文档很清楚：

<NavLink>

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

因此，答案是否定的。 除上述原因外，没有其他原因。

Answer 2

当您需要在活动<Link>上使用样式或类属性时，您可以使用<NavLink>

让我们看看这个例子：

关联

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

导航链接

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

Answer 3

链接组件

它用于创建允许在不同 URL 上导航的链接，当我们单击任何特定的Link时，它应该加载与该路径关联的页面，而无需重新加载页面。 例子：

导航链接组件：

如果，我们想为链接添加一些样式。 因此，当我们单击任何特定链接时，可以轻松识别哪个链接处于活动状态。 对于这个反应路由器提供NavLink而不是Link 。 现在从Navlink替换 Link 并添加属性activeStyle 。 activeStyle属性意味着当我们点击链接时，它应该以不同的样式突出显示，以便我们可以区分哪个链接当前处于活动状态。 例子：

参考： https ://www.javatpoint.com/react-router

Answer 4

简单地说，当您使用<Link>时，所选元素上没有任何活动类。
相反，使用<NavLink>选定的元素会突出显示，因为该元素添加了一个活动类。
希望对你有用。

Answer 5

只是为了在 v6 中添加， NavLink将.active类添加到a标签，而不需要任何额外的代码，例如

<NavLink to="/">Link 1</Link>
<NavLink to="/link2">Link 2</Link>

将呈现为：

<a href="/" className='active'>Link 1</Link>
<a href="/link2">Link 2</Link>

如果用户位于主 URL (https://localhost:3000)

Answer 6

从 v6.0.0-beta.3 开始的一个区别是 activeClassName 和 activeStyle 已从 NavLinkProps 中删除。 相反，您可以将函数传递给 style 或 className，这将允许您根据组件的活动状态自定义内联样式或类字符串。 您还可以将函数作为子项传递，以根据组件的活动状态自定义组件的内容，这对于更改内部元素的样式特别有用。

Answer 7

当您想要将链接突出显示为活动链接时，将使用 NavLink。 因此，在每次路由到页面时，链接都会根据 activeClassName 突出显示。 链接用于不需要突出显示的链接。