React Router v4 <NavLink> 与 <Link> 的优势

IT技术 javascript reactjs react-router react-router-v4
2021-05-25 07:01:43

除了在 NavLink 上设置“activeClassName”和“activeStyle”的能力之外,在站点上的非导航元素(即页眉或页脚中不是主要导航)上创建指向其他路由的链接,是否有任何理由使用NavLink over Link不需要活动状态/类?

4个回答

官方文档是明确的:

<NavLink>

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

因此,答案是否定的除了上面提到的一个原因,没有其他原因。

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

让我们看看例子:

关联

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

导航链接

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

链接组件

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

在此处输入图片说明

导航链接组件:

如果,我们想给链接添加一些样式因此,当我们单击任何特定链接时,可以轻松识别哪个链接处于活动状态。对于这个react-router提供NavLink而不是 Link现在替换Navlink 中的Link并添加属性activeStyleactiveStyle性能意味着,当我们点击链接,就应该用不同的风格来强调这样我们就可以区分哪些链接是当前活动。 例子:

在此处输入图片说明

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

简单地说,当您使用时,所选元素上<Link>没有任何活动类。
相比之下,<NavLink>被选中的元素被高亮显示是因为这个元素被添加了一个活动类。
希望对你有用。