react-router6.0新版本 NavLink中activeClassName是无效的

已于 2022-12-29 18:15:40 修改
阅读量469 收藏 1
点赞数
分类专栏： react 文章标签： react.js javascript 前端
于 2022-12-05 17:01:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69892739/article/details/128189454
版权

目录

使用react-router6.0版本的一个NavLink的用法：

在使用react-router6.0版本，实现一个点击切换样式，使用activeClassName是没有效果的。
错误的写法（是react-router5版本写法）：
在这里插入图片描述
在这里插入图片描述

原因：是因为6.0版本官方已经不再支持activeClassName这种写法，需要换成动态设置className。

详细请打开6.0官网查看：react-router6.0版本

正确的使用方法：
在此处className封装一个方法
运用三元运算符
实现效果：
在这里插入图片描述

夏兮颜☆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-router-dom 版本6.18.0中NavLink的api和属性介绍
小墨蛇的博客
11-17 1070
有时候，我们希望 NavLink 的激活状态不仅仅是路径匹配，还要满足一些其他的条件，这时可以使用 isActive 属性。// 自定义激活状态的逻辑这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。使用逻辑
【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题
miaomiao_666666的博客
12-12 2278
【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题
路由链接高亮（二）——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式
weixin_44867717的博客
06-20 1699
路由链接高亮——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式 NavLink 相当于 Link 组件，但是，它自带高亮类名 可以通过 activeClassName 来修改默认的高亮类名 也可以通过activeStyle 来动态添加选中的样式 src/views/Footer.js <NavLink activeClassName="todos-active" to="/all"
react中设置activeClassName的笔记
小墨蛇的博客
11-17 772
React是一种流行的JavaScript库，用于构建动态用户界面。它具有许多有用的组件，其中之一是NavLink组件。NavLink组件用于在React应用程序中创建链接，并且它具有许多有用的属性，例如选中的样式设置。
使用react-router-dom中的＜NavLink＞activeClassName样式不生效
sinat_15625949的博客
11-05 2684
问题 使用react-router-dom中的<NavLink>切换页面时activeClassName样式不生效 原因 本地react-router-dom包已经更新到最新6.0.0-beta.8版本，beta版本不稳定 解决方法1 由于beta版本不稳定，建议回到稳定版本V5.3.0 解决方法2 使用最新版本react-router-domV6.0.0以上，可以通过className和style属性进行修改active状态。 两个属性都是通过箭头函数接收到isAc
react-router6.0版本 NavLink中activeClassName无效
小怪獸丶的糖的专栏
12-08 1644
版本使用的是6.0的react-router，想实现的效果是菜单点击高亮显示。使用activeClassName设置高亮的class 名称时。没有效果 问题原因：6.0版本官方已经不再支持activeClassName这种写法了，换成动态设置className即可 <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " mactive" : "")} to="/about">
NavLink的高亮（React Router6）
richest_qi的博客
06-06 911
，创建react项目：router_app。默认使用当前react的最新版本：react@18、react-dom@18。 ，默认下载安装最新版本r：react-router-dom@6。涉及的文件包括： 入口文件index.js 注意点：。 注意点： pages/About/index.jsx（About组件） NavLink的高亮 activeClassName不奏效且React报错 项目根路径下新建css文件：App.css。 App.js中引入App.css，并给NavLink组件设置activ
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
koa-react-router：用于koa 2的react-router中间件
02-03
可以将koa-react-router轻松安装在koa 2应用程序中，如下所示： // index.js import Koa from 'koa' ; import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
react-router-CN：React Router V4中文文档
02-19
React路由器 用于的声明式路由组件 文件 包 这是一个基于管理的存储库。我们基于此代码库已经在npm发布了几个包括： 包名 版本 文件 描述 React Router核心组件 用于DOM绑定的React Router 用于的React路由器 ...
mobx-react-router:使MobX状态与react-router保持同步
04-22
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的，因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发（并复制自） 。 该分支（主节点）与react-...
使用react-router-dom中的＜NavLink＞activeClassName报错
chloecode的博客
12-09 1050
需求：点击对应按钮实现高亮 报错代码： demo是高亮对应的样式类名 <NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink> <NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink> 报错信息： 说react.
React-Router实战：NavLink
若水弹丸之地
03-23 6497
基础： （1）引入使用： import { NavLink } from 'react-router-dom' <NavLink to="/about"> About </NavLink> （2）activeClassName：string //当被激活时，显示类名为selected 的css样式 <NavLink to="/about" activ...
【react-router-dom5】使用NavLink组件同时设置className默认样式和activeClassName选中样式，选中样式不生效的解决方法
zlting_的博客
02-21 239
前提：在做React项目时，发现使用NavLink同时设置className默认样式和activeClassName选中样式，选中样式不生效问题。
React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题
weixin_30316097的博客
01-25 1153
首先 导航链接应该使用NavLink而不再是Link NavLink使用方法见https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md NavLink和PureComponent一起使用的时候，会出现 激活链接样...
第06节、路由：NavLink中的常用选项
DreamFive
03-21 8465
上一节，初步使用了 React 路由。这节是针对 NavLink 标签上的选项。Route和NavLink的exact选项上一节中，代码中有一个 exact 选项。这个是精确匹配使用，一般而言React会匹配所有能匹配的路由组阶，exact可以使我们的匹配更精确。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。123 &lt;Route  path="/" comp...
解决react-router 的activeClassName 首页重复匹配问题
liudanyang_21的博客
07-16 460
首先先看一下我的inedx.js入口文件： 这是未点击的时候index默认的是选中状态， 这是我点击其他的路由之后：，明显index路由重复了，仔细看了官方文档之后，发现其实Navlink也应该使用exact进行精确的匹配： <NavLink exact to="/" activeClassName="link-active">index</NavLink> 　　 ...
React（三）：PDF文件在线预览（简易版）
最新发布
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
08-04 421
【代码】React（三）：PDF文件在线预览（简易版）
react 最新版本 匹配的 react-dom react-router-dom 版本
06-03
React的最新版本是18.0.0，它与react-dom和react-router-dom的最新版本兼容。目前，React DOM的最新版本是18.0.0，React Router DOM的最新版本是6.2.1。建议在使用React 18时，使用最新版本的react-dom和react-router-dom，可以在项目中的package.json文件中声明依赖，如下所示： ``` "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.2.1" } ``` 注意，使用^符号表示安装相应主版本号下的最新次版本号，如上面的声明会安装最新的18.x.x版本，其中x表示最新的次版本号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏兮颜☆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值