React Router v4 <NavLink> vs <Link>的好处

Question

除了能够在NavLink上设置"activeClassName"和"activeStyle"之外,在您的站点上创建指向非导航元素上的其他路径(即,不是页眉或页脚中的主导航)的链接时,是否有任何理由使用NavLink over Link那些不需要活跃的州/班级？

Answer 1

该官方文档是明确的:

<NavLink>

一个特殊版本<Link>,它将在与当前URL匹配时为渲染元素添加样式属性.

因此,答案是否定的.除了上面提到的原因之外没有其他原因.

Answer 2

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

让我们看看例子:

链接

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

NavLink

<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>被选中的元素被高亮显示是因为这个元素被添加了一个活动类。
希望对你有用。