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

最新推荐文章于 2024-04-21 01:56:05 发布
最新推荐文章于 2024-04-21 01:56:05 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： React 文章标签： react.js NavLink activeClassName
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honeycandys/article/details/121802799
版权

版本使用的是6.0的react-router，想实现的效果是菜单点击高亮显示。使用activeClassName设置高亮的class 名称时。没有效果
问题原因：6.0版本官方已经不再支持activeClassName这种写法了，换成动态设置className即可

		<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " mactive" : "")} to="/about">
              About
		</NavLink>
        <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " mactive" : "")} to="/home">
              Home
         </NavLink>

效果图
在这里插入图片描述

鱼是一只鱼啊
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文| 使用缓存为Vue中的keep-alive类的react-router 。 如果只想要<KeepAlive> ，请尝试 React v15 + React-Router v4 + 问题 使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互 原因与解决方案 Route不匹配时，组件将被卸载 阅读源代码之后Route ，我们发现使用children撑起一个功能，可以帮助控制呈现行为。 隐藏而不是删除将解决此问题。 安装 npm install react-router-cache-route --save # or yarn add react-router-cache-route 用法 用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由） impor
react-router-domV6版本改版踩坑
HL477的博客
01-15 3262
1.父组件注册路由: v5版本： import { Route } from 'react-router-dom' <Route path="/about" component={About} /> <Route path="/home" component={Home} /> v6版本： import { Route } from 'react-router-dom' <Route path="about" element={<About />} /> &
react-router-dom ＜NavLink＞ v6用法
weixin_45388599的博客
01-08 1871
react-router 的<NavLink>组件： A <NavLink> is a special kind of that knows whether or not it is “active”. 在V6 版本中activeClassName 和activeStyle 已经从NavLinkProps中移除，可以直接在<NavLink>的className和style中使用一个函数来使用active。 className的用法： V5： <NavLink
路由链接高亮（二）——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式
weixin_44867717的博客
06-20 1648
路由链接高亮——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式 NavLink 相当于 Link 组件，但是，它自带高亮类名 可以通过 activeClassName 来修改默认的高亮类名 也可以通过activeStyle 来动态添加选中的样式 src/views/Footer.js <NavLink activeClassName="todos-active" to="/all"
使用react-router-dom中的＜NavLink＞activeClassName报错
chloecode的博客
12-09 893
需求：点击对应按钮实现高亮 报错代码： 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-router6.0新版本 NavLink中activeClassName是无效的
m0_69892739的博客
12-05 425
在使用react-router6.0版本，实现一个点击切换样式，使用activeClassName是没有效果的。：是因为6.0版本官方已经不再支持activeClassName这种写法，需要换成动态设置className。
react中设置activeClassName的笔记
小墨蛇的博客
11-17 680
React是一种流行的JavaScript库，用于构建动态用户界面。它具有许多有用的组件，其中之一是NavLink组件。NavLink组件用于在React应用程序中创建链接，并且它具有许多有用的属性，例如选中的样式设置。
使用react-router-dom中的＜NavLink＞activeClassName样式不生效
sinat_15625949的博客
11-05 2613
问题 使用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-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-CN：React Router V4中文文档
02-19
React Router核心组件 用于DOM绑定的React Router 用于的React路由器 React Router和Redux的集成 静态路由配置帮助助手 加群交流 React技术交流1群（已满）： React技术交流2群： 鸣谢 感谢支持React Router的...
mobx-react-router:使MobX状态与react-router保持同步
04-22
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的，因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发（并复制自） 。 该分支（主节点）与react-...
0603基础使用（二）-react路由-react
gaogzhen的博客
04-26 472
0603基础使用（二）-react路由-react
React 中NavLink 的使用
weixin_45677987的博客
07-06 3584
React 框架中 NavLink 的使用: 通过NavLink可以给Link添加类名，从而实现修改样式 <Nav-Link activeClassName="my-active"className="nav-link" to="/home" component={Home}> 未按待续.....
React-27：NavLink的基本使用
臧小川的博客
08-22 841
NavLink 可以通过实现路由链接的高粱 通过activeClassName指定样式名 标签体内容是一个特殊的标签属性 通过this.props.children可以获取标签体内容 <NavLink activeClassName="yus" to="/about"> About </NavLink> <NavLink activeClassName="yus" to="/home"> Home </NavLink> 封装 NavLink 自定义.
NavLink的高亮（React Router6）
richest_qi的博客
06-06 871
，创建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路由v6版本NavLink的两个小坑及解决
不定时分享最优质的网络技术与教程，满满的干货。
12-03 893
本人新人，是按照文档进行学习的，今遇到两个小坑，现记录如下：第一点，当前版本的NavLink的style或者className当中的isActive，不需要你对isActive进行任何操作，基本上照官网抄就可以了，会自动对isActive属性进行切换。在我看到相关文章中，好像在之前的版本中习惯使用内部的state对isActive进行true到false的转换。当然，以上只是一个小问题，最重要的是第二点第二点，NavLink现在的重点确实放在了nav上，按照我的实验，只有当NavLink组件放在用作“顶层导
react-router-dom 版本6.18.0中NavLink的api和属性介绍
小墨蛇的博客
11-17 934
有时候，我们希望 NavLink 的激活状态不仅仅是路径匹配，还要满足一些其他的条件，这时可以使用 isActive 属性。// 自定义激活状态的逻辑这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。使用逻辑
React基础知识大汇总
最新发布
qq_36828822的博客
04-21 930
如果在多个组件中使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数中，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。
react-dom 需要与react-router-dom 版本对应
06-03
是的，`react-dom` 和 `react-router-dom` 两个库需要版本对应。React Router 官方文档中建议使用以下版本组合： - `react-router[email protected]` 需要 `react@16.8.x` 或更高版本和 `react[email protected]` 或更高版本； - `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值