React 路由器 v4 < NavLink > vs < Link > 好处

除了能够在 NavLink 上设置“ activeClassName”和“ activeStyle”之外，在非导航元素上创建指向其他路由的链接时，是否有任何理由使用 导航链接 over 林克。不是主导航在页眉或页脚)在您的网站，不需要一个活动的状态/类？

107858 次浏览
小开
最佳答案

正式文件很明确:

<NavLink>

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

因此，答案是 没有。除了上面提到的原因，没有其他原因。

小开

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

让我们看看这个例子:

林克

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

导航链接

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

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

小开

链接组件

它用于创建允许在不同 URL 上导航的链接 当我们点击任何一个特定的 林克，它应该加载与该路径相关联的页面，而不需要重新加载页面。 例如:

enter image description here

NavLink 组件:

如果，我们想添加一些 风格到链接。这样，当我们点击 在任何特定的链接，它可以很容易地确定哪个链接是 为此反应路由器提供 导航链接而不是 链接 。现在从 纳文林克中替换 Link 并添加属性 ActiveStyle。ActiveStyle属性意味着当我们点击链接时，它应该以不同的风格突出显示，这样我们就可以 区分哪个链接当前处于活动状态。 例如:

enter image description here

档号: https://www.javatpoint.com/react-router

小开

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

小开

仅仅为了添加 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>

如果用户使用的是主网址( https://localhost:3000)

小开

当您希望将链接突出显示为活动链接时，可以使用 NavLink。因此，在每次到页面的路由中，链接都会根据 activeClassName 突出显示。链接是为链接，无需突出显示。


提交答案