react-router-dom 版本6.18.0中NavLink的api和属性介绍
React Router 是一个基于 React 的路由库,它可以帮助我们在 React 应用中实现页面的切换和路由的管理。而 NavLink 则是 React Router 中的一个组件,它可以帮助我们实现导航栏的样式设置和路由跳转。
在 React Router 版本6.18.0 中,NavLink 组件的 API 和属性有以下几个:
API
NavLink:创建一个 NavLink 组件,用于实现导航栏的样式设置和路由跳转。
属性
to:指定 NavLink 跳转的路由地址,可以是一个字符串或一个对象。exact:如果为 true,则 NavLink 只会在路径完全匹配时才会被激活。strict:如果为 true,则 NavLink 在匹配时会考虑路径末尾的斜杠。isActive:一个回调函数,用于自定义 NavLink 的激活状态。location:指定 NavLink 的位置信息,可以是一个字符串或一个对象。aria-current:用于设置 NavLink 的 ARIA 当前状态属性。
使用案例和场景
下面我们来看一下 NavLink 的使用案例和场景。
基本使用
首先,我们需要在项目中导入 NavLink 组件:
import { NavLink } from 'react-router-dom';
然后,我们可以使用 NavLink 来创建一个导航链接:
<NavLink to="/home">Home</NavLink>
这个 NavLink 组件会渲染成一个带有样式的链接,点击它会跳转到指定的路由地址。
设置样式
在 NavLink 中,我们可以通过设置 activeClassName 和 activeStyle 属性来设置激活状态下的样式。例如:
<NavLink to="/home" activeClassName="active">Home</NavLink>
这个 NavLink 组件在激活状态下会添加一个名为 “active” 的类名,我们可以通过 CSS 来设置这个类名下的样式。
.active {color: red;
}
除了 activeClassName 属性,我们还可以使用 activeStyle 属性来设置激活状态下的样式,例如:
<NavLink to="/home" activeStyle={{ color: 'red' }}>Home</NavLink>
这个 NavLink 组件在激活状态下会应用一个内联样式,将链接的颜色设置为红色。
精确匹配
有时候,我们希望 NavLink 只在路径完全匹配时才会被激活,这时可以使用 exact 属性。例如:
<NavLink to="/home" exact>Home</NavLink>
这个 NavLink 组件只会在路径为 “/home” 时才会被激活,如果路径为 “/home/other”,则不会被激活。
严格匹配
有时候,我们希望 NavLink 在匹配时考虑路径末尾的斜杠,这时可以使用 strict 属性。例如:
<NavLink to="/home/" strict>Home</NavLink>
这个 NavLink 组件只会在路径为 “/home/” 时才会被激活,如果路径为 “/home”,则不会被激活。
自定义激活状态
有时候,我们希望 NavLink 的激活状态不仅仅是路径匹配,还要满足一些其他的条件,这时可以使用 isActive 属性。例如:
<NavLink to="/home" isActive={(match, location) => {// 自定义激活状态的逻辑return match && location.search === '?active=true';
}}>Home</NavLink>
这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。
使用逻辑
<NavLinkclassName={({ isActive }) => (isActive ? " selectnav" : "")}to={ele.path}>{ele.name}
</NavLink>
默认使用

根据路径默认匹配 进行激活 激活的默认的class active

设置位置信息
有时候,我们希望 NavLink 的位置信息不是当前的路由地址,而是其他的地址,这时可以使用 location 属性。例如:
<NavLink to="/home" location={{ pathname: '/other' }}>Home</NavLink>
这个 NavLink 组件的位置信息为 “/other”,但是点击它时会跳转到 “/home”。
设置 ARIA 当前状态属性
最后,我们可以使用 aria-current 属性来设置 NavLink 的 ARIA 当前状态属性。例如:
<NavLink to="/home" aria-current="page">Home</NavLink>
这个 NavLink 组件会在激活状态下添加一个 aria-current 属性,将它的值设置为 “page”。
代码和注释
最后,我们来看一下完整的代码和注释:
import { NavLink } from 'react-router-dom';function App() {return (<nav>{/* 基本使用 */}<NavLink to="/home">Home</NavLink>{/* 设置样式 */}<NavLink to="/home" activeClassName="active">Home</NavLink><NavLink to="/home" activeStyle={{ color: 'red' }}>Home</NavLink>{/* 精确匹配 */}<NavLink to="/home" exact>Home</NavLink>{/* 严格匹配 */}<NavLink to="/home/" strict>Home</NavLink>{/* 自定义激活状态 */}<NavLink to="/home" isActive={(match, location) => {// 自定义激活状态的逻辑return match && location.search === '?active=true';}}>Home</NavLink>{/* 设置位置信息 */}<NavLink to="/home" location={{ pathname: '/other' }}>Home</NavLink>{/* 设置 ARIA 当前状态属性 */}<NavLink to="/home" aria-current="page">Home</NavLink></nav>);
}
以上就是 React Router 版本6.18.0 中 NavLink 的 API 和属性介绍、基本使用案例和场景,以及代码和注释。希望可以帮助大家更好地使用 React Router 中的 NavLink 组件。
相关文章:
react-router-dom 版本6.18.0中NavLink的api和属性介绍
React Router 是一个基于 React 的路由库,它可以帮助我们在 React 应用中实现页面的切换和路由的管理。而 NavLink 则是 React Router 中的一个组件,它可以帮助我们实现导航栏的样式设置和路由跳转。 在 React Router 版本6.18.0 中,NavLink…...
八叉树(Octree)和KD树区别?2d tree与3d tree区别?
一、八叉树(Octree)和KD树 八叉树(Octree) 结构:八叉树是一种用于三维空间数据的树状结构,每个分支节点恰好有八个子节点。每个节点代表空间中的一个立方体区域,这个立方体区域被均匀地分割成…...
Union(联合体、共用体)
结构体和共用体的区别在于:结构体的各个成员会占用不同的内存,互相之间没有影响;而共用体的所有成员占用同一段内存,修改一个成员会影响其余所有成员。 结构体占用的内存大于等于所有成员占用的内存的总和(成员之间可能…...
C++11的互斥包装器
文章目录 1. 为何要引入互斥包装器?2. lock_guard3. unique_lock4. 两者之间的不同5. 总结 1. 为何要引入互斥包装器? 在C多线程中会经常用到mutex,在使用的时候lock后,有时候会忘记使用unlock进行解锁造成死锁,或者在…...
HR应用在线人才测评,给企业招聘带来的好处
一、什么是人才测评? 人才测评是指运用一系列的科学方法,对人的基本素质,专业能力,心理健康,性格进行选拔,评价及发展人才的一种科学方法。近十多年,它被广泛运用于国有大型企业的人才招聘和人…...
深入了解百度爬虫工作原理
在当今数字化时代,互联网已经成为人们获取信息的主要渠道之一。而搜索引擎作为互联网上最重要的工具之一,扮演着连接用户与海量信息的桥梁角色。然而,我们是否曾经好奇过当我们在搜索引擎中输入关键词并点击搜索按钮后,究竟是如何…...
【C语言基础】分享近期学习到的volatile关键字、__NOP__()函数以及# #if 1 #endif
📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…...
docker容器自启动
场景 当服务器关机重启后,docker容器每次都要去docker start 容器id 怎么可以下次让它自启动呢? 解决 先 # docker ps -a 查到之前启动过的容器id # docker update --restartalways 容器id重启后,reboot,就不用再单独去启动容…...
【C++】:模板的使用
目录 1、泛型编程 2、函数模板 2.1、函数模板概念 2.2、函数模板格式 2.3、函数模板的原理 2.4、函数模板的实例化 2.6、模板参数的匹配原则 3、类模板 3.1、 类模板的定义格式 3.2、 类模板的实例化 4、非类型模板参数 5、模板的特化 5.1、函数模板特化 5.2、类模…...
Springboot框架中使用 Redis + Lua 脚本进行限流功能
Springboot框架中使用 Redis Lua 脚本进行限流功能 限流是一种用于控制系统资源利用率或确保服务质量的策略。在Web应用中,限流通常用于控制接口请求的频率,防止过多的请求导致系统负载过大或者防止恶意攻击。 什么是限流? 限流是一种通过…...
【nlp】2.5(cpu version) 人名分类器实战项目(对比RNN、LSTM、GRU模型)
人名分类器实战项目 0 项目说明1 案例介绍2 案例步骤2.1 导入必备的工具包2.2 数据预处理2.2.1 获取常用的字符数量2.2.2 国家名种类数和个数2.2.3 读数据到python环境中2.2.4 构建数据源NameClassDataset2.2.5 构建迭代器遍历数据2.3 构建RNN及其变体模型2.3.1 构建RNN模型2.3…...
记录基于scapy构造ClientHello报文的尝试
最近有个需求就是用scapy构造https的client hello报文,由用户指定servername构造对应的报文。网上对于此的资料甚少,有的也是怎么去解析https报文,但是对于如果构造基本上没有找到相关的资料。 一直觉得最好的老师就是Python的help功能和dir功…...
程序设计实践学习笔记
第1题 题目描述 创建一个返回四舍五入到最接近整数的分数之和的函数。在矩阵中有每行的第一个数字表示分子,第二个数子表示分母,挑战者需要将该分数的结果进行四舍五入并将矩阵中所有分数结果总和进行返回。 输入输出格式 输入格式 数字 N 表示的是矩阵的行数。…...
Ubuntu中apt-get update显示域名解析失败
第一步 检查主机->虚拟机能否ping成功 ping 红色框中的IPv4地址 能通,表示虚拟机ip配置成功;否则,需要先配置虚拟机ip 第二步 检查是否能ping成功百度网址 ping www.baidu.com 若不成功,可能原因 虚拟机没联网,打开火狐浏览器…...
go学习之简单项目
项目 文章目录 项目1.项目开发流程图2.家庭收支记账软件项目2)项目代码实现3)具体功能实现 3.客户信息管理系统1)项目需求说明2)界面设计3)项目框架图4)流程5)完成显示客户列表的功能6ÿ…...
代码随想录二刷 | 数组 | 总结篇
代码随想录二刷 | 数组 | 总结篇 基础知识二分查找移除元素有序数组的平方长度最小的数组最小覆盖子串螺旋数组 基础知识 定义:数组是存放在连续内存空间上的相同类型数据的集合 特点: 数组下标从 0 开始数组内存空间的地址是连…...
go test 命令详解
文章目录 1.简介2.test flag3.test/binary flags4.常用选项5.示例参考文献 1.简介 go test 是 Go 用来执行测试函数(test function)、基准函数(benchmark function)和示例函数(example function)的命令。 …...
【Mysql学习笔记】1 - Mysql入门
一、Mysql5.7安装配置 下载后会得到zip 安装文件解压的路径最好不要有中文和空格这里我解压到 D:\hspmysql\mysql-5.7.19-winx64 目录下 【根据自己的情况来指定目录,尽量选择空间大的盘】 添加环境变量 : 电脑-属性-高级系统设置-环境变量,在Path 环境变量增加mysq…...
sentinel 网关
网关简介 大家都都知道在微服务架构中,一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢?如果没有网关的存在,我们只能在客户端记录每个微服务的地址,然后分别去调用。 这样的架构,会存在…...
常见面试题-MySQL的Explain执行计划
了解 Explain 执行计划吗? 答: explain 语句可以帮助我们查看查询语句的具体执行计划。 explain 查出来的各列含义如下: id:在一个大的查询语句中,每个 select 关键字都对应一个唯一的 id select_type:…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
