我啥时候应该在 NavLink 上使用 Link?

Posted

技术标签:

【中文标题】我啥时候应该在 NavLink 上使用 Link?【英文标题】:When should I use Link over NavLink?我什么时候应该在 NavLink 上使用 Link? 【发布时间】:2021-05-16 23:38:21 【问题描述】:

参考React Router v4 <NavLink> vs <Link> benefits 和官方文档,NavLinkLink 的一个变体,允许您在它是活动链接时应用样式属性。这些样式属性似乎不是强制性的,而且我还没有找到任何描述使用Link 的优点。

如果是这样,为什么不到处使用NavLink?有什么理由选择Link 而不是NavLink?也许是功能,还是更好的性能?

【问题讨论】:

因为您可能只需要一个指向主页的链接,您不需要在其上应用任何活动类,因此您只需将其设为Link,而不是NavLink。这是我认为的主要区别。 【参考方案1】:

实际上,这两者之间的主要区别在于类属性。当我们使用 NavLink 作为标签时,它会在单击时自动继承一个活动类。另一方面,Link 标签现在在点击时确实有一个活动类。

我应该什么时候使用 NavLink?

顾名思义“NavLink”,我们主要在导航栏上使用它。这是因为活动类允许我们在 App.css 样式表中定义自定义样式。因此,我们可以使用它来设置活动按钮的样式,通知用户他/她当前在哪个页面上。

我应该什么时候使用链接?

Link 标签可以用在我们只想做一些没有特殊效果的路由的地方。例如;我们可以将链接标签用于滚动到顶部按钮、添加到卡片按钮、提交按钮等等。

【讨论】:

那么,只使用NavLink 有什么害处吗?例如,如果我当前使用的是Link,我现在用NavLink 替换它,但在它获得活动类时选择不做任何事情,那么它实际上是同一件事,对吗? 两者都做同样的工作我认为没有害处,唯一的区别是链接组件用于导航网站上的不同路线。但 NavLink 用于将样式属性添加到活动路由。

以上是关于我啥时候应该在 NavLink 上使用 Link?的主要内容,如果未能解决你的问题,请参考以下文章

我啥时候应该在 django 模型字段上使用 null=False

我啥时候应该在“class”上使用“className”,反之亦然?

我啥时候应该在“re_path”上使用“path”?

jQuery UI - 我啥时候应该在小部件上使用 destroy 方法

我啥时候应该在独立的 node.js 上使用 express.js

我啥时候应该在常规线程上使用 asyncio,为啥?它是不是提供性能提升?