【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题

【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题

问题描述

最近在使用react-router-dom中NavLink通过“activeClassName”属性给当前被点击导航选项添加自定义高亮样式类名的时候,样式不生效并且遇到以下报错:
Warning: React does not recognize the activeClassName prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase activeclassname instead. If you accidentally passed it from a parent component, remove it from the DOM element.
报错的大致意思是:React标签上并没有“activeClassName”这个内置属性。

原因猜测

可能是我当前的react或者相关库的版本太高,而新版本已经不支持这种用法,所以导致报错。

解决办法

  1. 首先我打开当前react 脚手架项目里的package.json文件查看了一下当前各个库的版本,分别是(均为当前最新版本):
"react": "^17.0.2",
"react-dom": "^17.0.2",   
"react-router-dom": "^6.0.2",
  1. 然后我将脚手架里的react-router-dom安装成v5.0.1版本:
 yarn  add  react-router-[email protected]5.0.1  --save

这时便可以正常运行同时也没有报错了,所以之前的问题原因猜测成立:react-router-dom新版本已经不支持activeClassName属性了,大概v6以后的版本高亮样式类名必须只能使用默认的active类名,或者采用其他解决办法。(这只是我目前的判断结果,具体更新结果还需跟进官方文档)

补充说明

  1. 如果是react-router-dom v6.0.1之前的版本,注册路由的写法应该是:
<Route path="路径" component={组件名}/>
  1. 如果是react-router-dom v6.0.1之后的版本,首先需要引入一个“Routes”,并且注册路由的写法应该是将所有Route包裹在一个Routes内,component改为element,组件写为标签形式:
import {NavLink,Route,Routes} from "react-router-dom";
<Routes>
	<Route path="路径" element={<组件名/>}/>
</Routes>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>