无法在React NavLink中删除活动类
在React中，NavLink是React Router库提供的一个组件，用于在应用中创建导航链接。当NavLink与当前URL匹配时，它会自动添加一个活动类（active class）以突出显示当前活动的导航链接。
要删除NavLink中的活动类，可以使用activeClassName属性。该属性允许我们指定一个自定义的类名，用于替代默认的活动类。通过将activeClassName属性设置为一个空字符串，我们可以将活动类从NavLink中删除。
以下是一个示例代码：
import { NavLink } from 'react-router-dom';
const Navigation = () => {
return (
<nav>
<ul>
<li>
<NavLink exact to="/" activeClassName="">
Home
</NavLink>
</li>
<li>
<NavLink to="/about" activeClassName="">
About
</NavLink>
</li>
<li>
<NavLink to="/contact" activeClassName="">
Contact
</NavLink>
</li>
</ul>
</nav>
);
};
export default Navigation;在上述代码中，我们将activeClassName属性设置为空字符串，这样当NavLink与当前URL匹配时，不会添加任何类名。
需要注意的是，这里没有提及任何腾讯云相关产品，因为在这个特定的问题中，与云计算品牌商无关。如果您有其他关于云计算、IT互联网领域的问题，我将很乐意为您提供帮助。
相关·内容
我一直试图使用NavLink的NavLink属性将特定的颜色和背景应用于链接/锚。但是，这些更改没有在单击时显示。我在下面附加js和CSS片段import React from 'react';import '.='active_link' to='/'>
浏览 0提问于2022-01-02得票数 1
回答已采纳
我正在使用react-router-dom，当url匹配时，我需要使red成为一个链接，在我的up中，我有两个url，/ => home和/map。使用当前代码，我可以路由到不同的页面，但当浏览器中的url更改时，NavLink不会突出显示。有没有办法解决这个问题。import React from 'react'
import { NavLink, Route } from 'react
浏览 1提问于2017-09-06得票数 3
回答已采纳
className=`${styles.listitem}`>Blogs</li></ul>background: #0077bb;但是我不希望它是这样的，当我从父屏幕调用这个组件时，我想在它中添加一个活动类，同时将一个活动类作为一个支柱传递
浏览 10提问于2022-04-18得票数 0
我利用NavLink样式将活动类添加到当前页面菜单项链接中。我也在使用"exact in the Navs。然而，我无法从主页中删除活动类。任何人可以看看我的代码，看看我是否遗漏了什么?谢谢。代码如下： app.js - import React, { Component } from 'react';
import '., { Compon
浏览 17提问于2019-05-27得票数 0
1回答
我在activeClassName和NavLink标签上有一个问题。在'IntrinsicAttributes & NavLinkProps & RefAttributes‘类型上不存在属性'activeClassName’。”从“react路由器-dom”导入{ NavLink }；导入‘../样式/样式-页面/导航
导出连接导航= () => { export ( Home Discution )}
浏览 3提问于2022-03-15得票数 1
问题：isActive (向链接添加活动类)无法工作。import React from 'react';import { NavLink
浏览 33提问于2022-10-29得票数 0
我使用带有NavLink的react-router，因为我想设置活动链接的样式。这是菜单组件： import React from 'react'; </Switch>
&
浏览 9提问于2019-02-09得票数 0
回答已采纳
根据Reactstrap docs:这就是我应该使用active navlink的方式 ...<NavLink href="#" active = true >Link< /NavLink> import { NavLink } from 'react-router-do
浏览 4提问于2017-02-21得票数 8
回答已采纳
2回答
菜单中的第一项具有活动类。但是，当我单击菜单中的另一项时，此项目也会收到此类活动，而以前的类活动尚未被删除。图片更好地理解 <ul>
<li><NavLink to="/" activeClassName="active">Domov<
浏览 5提问于2020-11-24得票数 0
回答已采纳
我在导航菜单中有一些链接，它输出html，如下所示：<li></li><a href="/subs">Subs</a></ul>
根据 post的解决方案，我试图只将类添加到导航菜单中的当前页面链接(例如，如果您在/ pag
浏览 5提问于2020-09-05得票数 0
回答已采纳
1回答
</Switch> </div> )import { Link } from "react-router-dom受到我标记正确的答案的启发，下面是：
const acti
浏览 1提问于2021-05-27得票数 0
回答已采纳
我使用的是react路由器1.0.2，我的路由如下所示： <Provider store={store}> </Router> document.querySelector('.container')我的App组件看起来像这样，我想我可以在道具中传递位置：
import
浏览 4提问于2015-12-22得票数 14
回答已采纳
我打算使用React路由器对活动路由进行样式化。我正在使用NavLink来做到这一点。请参阅以下代码：import React from 'react';import {NavLink} from 'react-router-dom'
const NavBar = (props) =&
浏览 1提问于2019-07-24得票数 2
回答已采纳
2回答
我想在非活动链接上添加一个“中空”类。我在用react-router-dom。这是我的简单菜单：import {NavLink} from 'react-router-dom';
const Menu = () => {我看到了router在NavLink上有一个NavLink属性，但是没有inactiveClas
浏览 3提问于2020-04-17得票数 1
回答已采纳
2回答
我想将active类添加到li项中，而不是a中，如不这是我的reactJS代码
import React, { Component
浏览 0提问于2018-05-10得票数 0
1回答
我在用Navlinkconst MainMenu = () => { <ul className="d-flex"> <NavLinkexact to=&q
浏览 9提问于2022-03-11得票数 3
回答已采纳
我希望我的<Link>在与它们的路线匹配时有一个active类。当前，即使在链接引用的路由上，结果的<a>标记也不会改变。PS:我在使用redux路由器和redux路由器。我还使用默认的HashHistory，因为它是一个nwjs-app
浏览 3提问于2016-02-02得票数 1
回答已采纳
我使用activeClassName属性向链接添加了一个新的类，而在active state.it中，它在react路由器-dom的5.0.3版本中工作得很好。但在6.0.2版中，它开始向我展示警告，而且它不起作用。我无法找到任何关于这一变化的描述，在给出的文件在反应-路由器网站。<NavLink activeClassName={classes.active}
浏览 0提问于2021-11-17得票数 5
回答已采纳
React路由器会自动将“活动”className应用于非精确链接。我只需要它给NavLink“活动”类，当用户在/solutions/中
浏览 10提问于2021-12-09得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
