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

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

Green小宇宙伽罗2020/03/14 18:15:32

简而言之,当您使用时,所选元素上<Link>没有任何活动类。
相反,<NavLink>选中的元素会突出显示,因为此元素被添加了一个活动类。
希望对您有用。

TonyPro2020/03/14 18:15:32

链接组件

It is used to create links which allow to navigate on different URLs and When we click on any of that particular Link, it should load that page which is associated with that path without reloading the page. Example:

在此处输入图片说明

NavLink Component:

If, we want to add some styles to the Link. So that when we click on any particular link, it can be easily identified which Link is active. For this react router provides NavLink instead of Link. Now replace Link from Navlink and add properties activeStyle. The activeStyle properties mean when we click on the Link, it should be highlighted with different style so that we can differentiate which link is currently active. Example:

在此处输入图片说明

Ref: https://www.javatpoint.com/react-router

梅番长2020/03/14 18:15:32

官方文档是明确的:

<NavLink>

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

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

樱理查德2020/03/14 18:15:32

当需要在active上使用style或class属性时<Link>,可以使用<NavLink>

让我们看一个例子:

链接

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

导航链接

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