React Router v4 <NavLink> 与 <Link> 的好处答案

【问题标题】：React Router v4 <NavLink> vs <Link> benefitsReact Router v4 <NavLink> 与 <Link> 的好处
【发布时间】：2018-04-30 11:43:21
【问题描述】：

除了在 NavLink 上设置“activeClassName”和“activeStyle”的能力之外，当在非-您网站上不需要活动状态/类的导航元素（即不是页眉或页脚中的主导航）？

【问题讨论】：

我不能直接评论TOUMI（因为我没有50rep），所以在这里补充一下。 NavLink 将适当的焦点放在页面上以实现可访问性。使用链接时，页面加载时初始焦点会丢失，您还会注意到使用Link 时，通过下拉列表进行选项卡也会中断。 NavLink 解决了这个问题。

标签： javascript reactjs react-router react-router-v4

【解决方案1】：

official documentation 很清楚：

<NavLink>

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

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

【讨论】：

【解决方案2】：

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

让我们看看例子：

链接

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

导航链接

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

【讨论】：

【解决方案3】：

链接组件

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

导航链接组件：

如果，我们想为链接添加一些样式。这样当我们点击在任何特定链接上，都可以很容易地识别出哪个链接是积极的。对于这个反应路由器提供 NavLink 而不是链接。现在替换 Navlink 中的 Link 并添加属性 activeStyle。 activeStyle 属性意味着当我们点击链接时，它应该以不同的样式突出显示，以便我们可以区分当前处于活动状态的链接。 例子：

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

【讨论】：

【解决方案4】：

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

【讨论】：

一些代码示例将对用户有所帮助。 From review