四、【React-Router6】高亮 NavLink

news2024/11/17 4:33:20

项目修改自 上一节 的 Demo

  • 这里需要注意的变化

    • 默认高亮样式类名如果依然是 active 则依然默认有效

    • 6 里移除了 activeClassName ,如果我的高亮样式类名是 peiqi,需要配置 className 为一个函数

      • 函数接收两个参数

        • isActive:是否激活
        • isPending:是否
      • .peiqi{ background: orange; }
        
        <NavLink 
        	className={({ isActive }) => isActive ? 'list-group-item peiqi' : 'list-group-item'}
            to="/about"
        >About</NavLink>
        
      • 路由有很多的话写着很麻烦,可以优化如下:

      • const activeClassName = ({isActive}) => isActive ? 'list-group-item peiqi' : 'list-group-item'
        
        <NavLink className={activeClassName} to="/about" >About</NavLink>
        
      • Result

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/55476.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Arduino开发实例-DIY双向访客计数器和自动灯光控制

双向访客计数器和自动灯光控制 1、应用介绍 本应用将使用 Arduino 创建双向访客柜台和自动灯光控制系统。该应用基于一对 IR(红外)传感器,可在出现中断时检测障碍物。实际上,该系统可以检测来自两个方向的访客。从而对进入的访客数量和离开的访客数量进行计数。 该双向访…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校心理健康咨询平台vknhv

毕业设计其实不难&#xff0c;主要毕业的时候任务太紧了&#xff0c;所以大家都非常忙没有时间去做&#xff0c;毕业设计还是早做准备比较好&#xff0c;多花点时间也可以做出来的&#xff0c;建议还是自己动手去做&#xff0c;比如先选一个题&#xff0c;这样就有方向&#xf…

GIS工具maptalks开发手册(三)01——绘制工具

GIS工具maptalks开发手册(三)01——绘制工具 效果 代码 1、html官方版 <!DOCTYPE html> <html> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1"> <title>交互 - 绘制…

vite + vue3.0 + ts 项目搭建

Welcome to vue3-elementplus-admin &#x1f44b; vite vue3 Pinia elementUi-plus 无限级菜单 权限管理 后台模板 &#x1f3e0; Homepage Author &#x1f464; xuxuxu-ni Github: xuxuxu-niQQ: 595485548QQ群: 157216616email: 595485548qq.com Prerequisites node…

安卓使用动画启动Acitvity

1.检查系统版本 动画过渡Activity适用于*Android5.0&#xff08;API21&#xff09;*及以上&#xff0c;在代码增加中检查版本增强代码健壮性。 2.指定自定义过渡动画。 过渡可以在xml文件中指定&#xff0c;也可以直接在代码中指定。使用Window.requestFeature()声明启动窗口…

C语言:结构体

1、结构体&#xff1a; 定义&#xff1a;结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 结构的声明&#xff1a; struct tag {member-list;}variable-list;举例&#xff1a;声明一个学生类型&#xff0c;想通过学生类型来创建学生变…

【Matplotlib绘制图像大全】(二十七):Matplotlib将数组array保存为图像

前言 大家好,我是阿光。 本专栏整理了《Matplotlib绘制图像大全》,内包含了各种常见的绘图方法,以及Matplotlib各种内置函数的使用方法,帮助我们快速便捷的绘制出数据图像。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmMatp…

SpringBoot+Vue实现前后端分离的大学生志愿者管理系统

文末获取源码 开发语言&#xff1a;Java 使用框架&#xff1a;spring boot 前端技术&#xff1a;JavaScript、Vue.js 、css3 开发工具&#xff1a;IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库&#xff1a;MySQL 5.7/8.0 数据库管理工具&#xff1a;phpstudy/Navicat JD…

【C++修炼之路】10. vector类

每一个不曾起舞的日子都是对生命的辜负 vector本节目标1. vector的介绍及使用1.1 vector的介绍1.2 vector的使用1.2.1 vector的定义&#xff08;构造函数&#xff09;1.2.2 vector iterator的使用1.2.3 vector的空间增长问题1.2.4 vector增删查改2. vector的模拟实现2.1 构造函…

Mellanox CX4 offload 卸载功能介绍

无状态功能卸载 cx4支持多种类型的无状态卸载&#xff0c;如下面列表所示。 Checksum OffloadLarge Send OffloadsReceive Side ScalingTransmit Side ScalingInterrupt ModerationLarge Receive OffloadsVLAN insertion and strippingFlow Steering at layers 2, 3 and 4Pac…

使用MotionLayout实现模拟启动页动画和轮播图

目录效果图展示启动页效果轮播图效果MotionLayout详解准备工作正题轮播图效果实现ConstraintSetTransitionCarousel浅述启动页的实现插入gif图源码在这里&#xff1a; 源码链接本文是用java写的效果图展示 下面是本博客我使用真机所实现的功能展现&#xff0c;方便大家根据自身…

化妆品行业的数字进化论:S2B2B电商网站如何助力化妆品企业打造增长新动能

近年来&#xff0c;伴随着国家经济的快速发展和消费者对“美”的追求日益强烈&#xff0c;大大推动了化妆品行业的蓬勃发展&#xff0c;根据公开数据显示&#xff0c;2021年我国化妆品零售总额达4026亿元&#xff0c;较2020年同比增长18.40%&#xff0c;我国目前已成为全球第二…

一篇文章让你全方位掌握git版本控制管理

注&#xff1a;侵权请联系作者删除 目录 1.引入&#xff1a; 2.Git 的工作区域和流程 3.stash区域 4.git基本操作 A.git add B.git commit c.git pull D.git fetch E.git branch F.git init 5.在项目中实际运用案例&#xff1a; A.在github上创建一个新仓库 B.复制刚创建…

matlab使用hampel滤波,去除异常值

此示例显示了Hampel用于检测和删除异常值的过程的 实现。 最近我们被客户要求撰写关于hampel滤波的研究报告&#xff0c;包括一些图形和统计输出。 产生一个包含24个样本的随机信号x。 重置随机数生成器以获得可重复的结果。 rng defaultlx 24; x randn(1,lx); 围绕x的每…

网页前端知识汇总(六)——如何让网页全部内容显示成灰色

最近很多做网站前端的技术员是不是都接到了老板的任务&#xff0c;让网站的网页显示效果都变成灰色&#xff0c;这个也是随某些事件的发生或者某些专题内容觉得需要这样做的&#xff0c;大部分用于大家都不愿意看到的专题事件如某某烈士&#xff0c;逝去的伟人等&#xff1b;大…

Scala013--Scala中的方法

因为Scala是一种函数式编程语言&#xff0c;因此在Scala中基本上都是方法和函数&#xff0c;但是需要注意的是&#xff0c;在Java中方法和函数是同一个意思&#xff0c;但是在Scala中函数和方法的含义不同&#xff1a; 方法&#xff1a;是类和对象的成员函数&#xff1a;是对象…

jeecgboot-前端组件封装代码示例

首先我们要知道 jeecgboot他前台的组件代码封装文件夹的位置在src-components中&#xff0c;这时我们其实可以观察他们代码的写法(个人感觉学习代码的最好的途径就是临摹他人高质量的代码、多看、多写)路径如图&#xff1a; 接下来我们会在标注3下实现一个简单的自定义组件 代码…

【Eureka】【源码+图解】【八】Eureka客户端的服务获取

【Eureka】【源码图解】【七】Eureka的下线功能 目录7. 获取服务7.1 初始化HeartBeat的task7.2 将task进一步包装成定时timerTask7.3 定时时间到&#xff0c;执行timeTask7.4 task获得线程资源&#xff0c;执行refreshRegistry()7.5 服务端接受请求7.6 获取Applications7. 获取…

Spark - RDD 的分区和Shuffle

一、RDD 的分区 前面在学习 MapReduces 的时候就提到分区&#xff0c;在RDD中同样也存在分区的概念&#xff0c;本质上都是为了提高并行度&#xff0c;从而提高执行的效率&#xff0c;那在 Spark 中的分区该怎么设置呢&#xff1f; 首先分区不是越多越好&#xff0c;太多意味…

[Android]Logcat调试

Android采用Log(android.util.log)工具打印日志&#xff0c;它将各类日志划分为五个等级。 Log.e 打印错误信息 Log.w 打印警告信息 Log.i 打印一般信息 Log.d 打印调试信息 Log.v 打印冗余信息 不同等级的日志信息&#xff0c;在日志栏中会以不同颜色和等级(E、W、…