当前位置: 首页 > news >正文

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 的路由库&#xff0c;它可以帮助我们在 React 应用中实现页面的切换和路由的管理。而 NavLink 则是 React Router 中的一个组件&#xff0c;它可以帮助我们实现导航栏的样式设置和路由跳转。 在 React Router 版本6.18.0 中&#xff0c;NavLink…...

八叉树(Octree)和KD树区别?2d tree与3d tree区别?

一、八叉树&#xff08;Octree&#xff09;和KD树 八叉树&#xff08;Octree&#xff09; 结构&#xff1a;八叉树是一种用于三维空间数据的树状结构&#xff0c;每个分支节点恰好有八个子节点。每个节点代表空间中的一个立方体区域&#xff0c;这个立方体区域被均匀地分割成…...

Union(联合体、共用体)

结构体和共用体的区别在于&#xff1a;结构体的各个成员会占用不同的内存&#xff0c;互相之间没有影响&#xff1b;而共用体的所有成员占用同一段内存&#xff0c;修改一个成员会影响其余所有成员。 结构体占用的内存大于等于所有成员占用的内存的总和&#xff08;成员之间可能…...

C++11的互斥包装器

文章目录 1. 为何要引入互斥包装器&#xff1f;2. lock_guard3. unique_lock4. 两者之间的不同5. 总结 1. 为何要引入互斥包装器&#xff1f; 在C多线程中会经常用到mutex&#xff0c;在使用的时候lock后&#xff0c;有时候会忘记使用unlock进行解锁造成死锁&#xff0c;或者在…...

HR应用在线人才测评,给企业招聘带来的好处

一、什么是人才测评&#xff1f; 人才测评是指运用一系列的科学方法&#xff0c;对人的基本素质&#xff0c;专业能力&#xff0c;心理健康&#xff0c;性格进行选拔&#xff0c;评价及发展人才的一种科学方法。近十多年&#xff0c;它被广泛运用于国有大型企业的人才招聘和人…...

深入了解百度爬虫工作原理

在当今数字化时代&#xff0c;互联网已经成为人们获取信息的主要渠道之一。而搜索引擎作为互联网上最重要的工具之一&#xff0c;扮演着连接用户与海量信息的桥梁角色。然而&#xff0c;我们是否曾经好奇过当我们在搜索引擎中输入关键词并点击搜索按钮后&#xff0c;究竟是如何…...

【C语言基础】分享近期学习到的volatile关键字、__NOP__()函数以及# #if 1 #endif

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…...

docker容器自启动

场景 当服务器关机重启后&#xff0c;docker容器每次都要去docker start 容器id 怎么可以下次让它自启动呢&#xff1f; 解决 先 # docker ps -a 查到之前启动过的容器id # docker update --restartalways 容器id重启后&#xff0c;reboot&#xff0c;就不用再单独去启动容…...

【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应用中&#xff0c;限流通常用于控制接口请求的频率&#xff0c;防止过多的请求导致系统负载过大或者防止恶意攻击。 什么是限流&#xff1f; 限流是一种通过…...

【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报文&#xff0c;由用户指定servername构造对应的报文。网上对于此的资料甚少&#xff0c;有的也是怎么去解析https报文&#xff0c;但是对于如果构造基本上没有找到相关的资料。 一直觉得最好的老师就是Python的help功能和dir功…...

程序设计实践学习笔记

第1题 题目描述 创建一个返回四舍五入到最接近整数的分数之和的函数。在矩阵中有每行的第一个数字表示分子&#xff0c;第二个数子表示分母,挑战者需要将该分数的结果进行四舍五入并将矩阵中所有分数结果总和进行返回。 输入输出格式 输入格式 数字 N 表示的是矩阵的行数。…...

Ubuntu中apt-get update显示域名解析失败

第一步 检查主机->虚拟机能否ping成功 ping 红色框中的IPv4地址 能通&#xff0c;表示虚拟机ip配置成功;否则&#xff0c;需要先配置虚拟机ip 第二步 检查是否能ping成功百度网址 ping www.baidu.com 若不成功&#xff0c;可能原因 虚拟机没联网&#xff0c;打开火狐浏览器…...

go学习之简单项目

项目 文章目录 项目1.项目开发流程图2.家庭收支记账软件项目2&#xff09;项目代码实现3&#xff09;具体功能实现 3.客户信息管理系统1&#xff09;项目需求说明2&#xff09;界面设计3&#xff09;项目框架图4&#xff09;流程5&#xff09;完成显示客户列表的功能6&#xff…...

代码随想录二刷 | 数组 | 总结篇

代码随想录二刷 &#xff5c; 数组 &#xff5c; 总结篇 基础知识二分查找移除元素有序数组的平方长度最小的数组最小覆盖子串螺旋数组 基础知识 定义&#xff1a;数组是存放在连续内存空间上的相同类型数据的集合 特点&#xff1a; 数组下标从 0 开始数组内存空间的地址是连…...

go test 命令详解

文章目录 1.简介2.test flag3.test/binary flags4.常用选项5.示例参考文献 1.简介 go test 是 Go 用来执行测试函数&#xff08;test function&#xff09;、基准函数&#xff08;benchmark function&#xff09;和示例函数&#xff08;example function&#xff09;的命令。 …...

【Mysql学习笔记】1 - Mysql入门

一、Mysql5.7安装配置 下载后会得到zip 安装文件解压的路径最好不要有中文和空格这里我解压到 D:\hspmysql\mysql-5.7.19-winx64 目录下 【根据自己的情况来指定目录,尽量选择空间大的盘】 添加环境变量 : 电脑-属性-高级系统设置-环境变量&#xff0c;在Path 环境变量增加mysq…...

sentinel 网关

网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去调用。 这样的架构&#xff0c;会存在…...

常见面试题-MySQL的Explain执行计划

了解 Explain 执行计划吗&#xff1f; 答&#xff1a; explain 语句可以帮助我们查看查询语句的具体执行计划。 explain 查出来的各列含义如下&#xff1a; id&#xff1a;在一个大的查询语句中&#xff0c;每个 select 关键字都对应一个唯一的 id select_type&#xff1a;…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...