React Router v4 <navlink> vs <link />的好处

Question

除了能够在NavLink上设置“activeClassName”和“activeStyle”之外，还有任何理由在创建非上其他路线的链接时使用导航而不是链接 - 您网站上不需要活动状态/类的导航元素（即，不是页眉或页脚中的主导航）？

Answer 1

{{3}}很清楚：

  

<NavLink>

     

<Link>的特殊版本，它会在与当前网址匹配时为渲染元素添加样式属性。

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

Answer 2

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

让我们看看例子：

链接

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

<强> NavLink

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

Answer 3

链接组件

  

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

NavLink组件：

  

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

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

Answer 4

简单来说， 使用链接时，所选元素上没有任何活动类。 相反，使用NavLink时，所选元素将突出显示，因为此元素被添加为活动类。 希望对您有用。