除了在 NavLink 上设置“activeClassName”和“activeStyle”的能力之外,在站点上的非导航元素(即页眉或页脚中不是主要导航)上创建指向其他路由的链接时,是否有任何理由使用NavLink over Link不需要活动状态/类?
React Router v4 <NavLink> 与 <Link> 的优势
IT技术
javascript
reactjs
react-router
react-router-v4
2021-05-25 07:01:43
4个回答
当您需要在 active 上使用样式或类属性时<Link>
,您可以使用<NavLink>
让我们看看例子:
关联
<Link to="/">Home</Link>
导航链接
<NavLink to="/" activeClassName="active">Home</NavLink>
链接组件
它用于创建允许在不同 URL 上导航的链接,当我们单击任何特定的Link 时,它应该加载与该路径关联的页面,而无需重新加载页面。 例子:
导航链接组件:
如果,我们想给链接添加一些样式。因此,当我们单击任何特定链接时,可以轻松识别哪个链接处于活动状态。对于这个react-router提供NavLink而不是 Link。现在替换Navlink 中的Link并添加属性activeStyle。该activeStyle性能意味着,当我们点击链接,就应该用不同的风格来强调这样我们就可以区分哪些链接是当前活动。 例子:
简单地说,当您使用时,所选元素上<Link>
没有任何活动类。
相比之下,<NavLink>
被选中的元素被高亮显示是因为这个元素被添加了一个活动类。
希望对你有用。
其它你可能感兴趣的问题