react-router-dom ＜NavLink＞ v6用法

最新推荐文章于 2024-09-08 23:37:53 发布
最新推荐文章于 2024-09-08 23:37:53 发布
阅读量1.9k 收藏 3
点赞数 2
分类专栏： 前端 react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45388599/article/details/122379396
版权
本文介绍了react-router-dom v6版本中NavLink组件的使用，包括如何在新的API下设置活动状态的className和style。V6版本移除了activeClassName和activeStyle属性，改用直接在className和style内定义函数的方式来实现活动状态的样式变化。
摘要由CSDN通过智能技术生成

react-router-dom 的<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 to="/faq" activeClassName="selected">
  FAQs
</NavLink
最低0.47元/天 解锁文章
Meursault153
关注
专栏目录
react-router-dom中NavLink用法
spcming的博客
09-27 1984
在react-router-dom中为我们提供了一个NavLink的组件，组建中含有一个名为activeClassName的属性，可以很方便的为我们提供路由切换时的选中效果 NavLink 使用NavLink时，其用法与Link无太大区别，在需要实现点击切换className时，可以用NavLink代替Link简化操作，并将需要点击后激活的ClassName值放到NavLink标签的activeClassName中即可，比如下方代码中让 li 标签点击后激活active-menu的class值 <
react-router-dom 版本6.18.0中NavLink的api和属性介绍
小墨蛇的博客
11-17 1155
有时候，我们希望 NavLink 的激活状态不仅仅是路径匹配，还要满足一些其他的条件，这时可以使用 isActive 属性。// 自定义激活状态的逻辑这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。使用逻辑
React Router中Link和NavLink的学习总结
最新发布
xiaokanfuchen86的博客
09-08 247
react
react入门之旅6——Route之NavLink
qq_41470573的博客
07-07 360
路由之项目层级 路由组件，并不是放在components下，而是重新创建一个pages，所有路由组件都放这里 src components Component001 index.jsx index.css ... pages Route-Component001 ...
react路由v6版本NavLink的两个小坑
huangfengnt的博客
02-17 1650
react路由v6版本NavLink样式不起作用的可能原因。
react-router-dom v6 使用
xu_yi_hang的博客
01-16 1997
目录 第一章 ：react-router-dom 简述 第二章 ：v5 和 v6 区别 第三章 ：简单的使用 前言 react-router-dom v6 距离更新也是有段时间了，相比于v5 来说，使用起来更加的方便，体积也更小，赶紧跟着我快速上手吧 提示：以下是本篇文章正文内容，下面案例可供参考 一、react-router-dom 简述 演示代码所使用的是这个版本┗|｀O′|┛ 嗷~~ 1.下载 npm install react-router-dom --save.
react-router-dom 之 Link 与NavLink
smaller_coder的博客
11-01 2181
本文主要记录react项目react-router的使用,主要介绍两种，Link 和 NavLink //menuList.js 导航条 import { NavLink ,Link} from 'react-router-dom' <NavLink exact to={childItem.path} data-index={number} className= {store.c...
React漫漫学习路之 React Router
dingzhengbo69534的博客
11-24 172
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。 引用 react-router 　　　　　　 // React Router 核心 react-router-do...
react-router-dom中link与Navlink
一条宝鱼的专栏
12-14 1213
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。 引用 react-router 　　　　　　 // React Router 核心 react-router-dom 　　　　// 用于 DOM 绑定的 React Router react-router-native 　　// 用于 Re..
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
2024年前端最全react-router-dom V6 中文文档教程总结_reactrouter6中文文档(1)，从零开始系统化学前端
2401_84619145的博客
05-06 1457
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】ter 可以直接嵌套 Router**这在之前是不行的需要在一个组件中再定义子路由。
React 之 react-router-dom
subsistent的博客
08-19 6144
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
react-router6.0新版本 NavLink中activeClassName是无效的
m0_69892739的博客
12-05 510
在使用react-router6.0版本，实现一个点击切换样式，使用activeClassName是没有效果的。：是因为6.0版本官方已经不再支持activeClassName这种写法，需要换成动态设置className。
【react-router@6】
阿牛哥的博客
10-16 563
【react-router@6】
React-Router实战：NavLink
若水弹丸之地
03-23 6547
基础： （1）引入使用： import { NavLink } from 'react-router-dom' <NavLink to="/about"> About </NavLink> （2）activeClassName：string //当被激活时，显示类名为selected 的css样式 <NavLink to="/about" activ...
NavLink的高亮（React Router6）
richest_qi的博客
06-06 957
，创建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 Router v6】快速上手react-router-dom6（对比 router5）
Coding and studying
08-10 9800
React Router 以三个不同的包发布到npm上，它们分别为：react-router：路由的核心库，提供了很多的：组件、钩子react-router-dom：包含react-router所有内容，并添加了一些专门用于DOM的组件，例如等react-router-native：包括react-router所有内容，并添加一些专门用于ReactNative的API，例如等与React Router 5.x版本相比，改变了什么？内置组件的变化：移除，新增。......
react路由v6版本NavLink的两个小坑及解决
不定时分享最优质的网络技术与教程，满满的干货。
12-03 969
本人新人，是按照文档进行学习的，今遇到两个小坑，现记录如下：第一点，当前版本的NavLink的style或者className当中的isActive，不需要你对isActive进行任何操作，基本上照官网抄就可以了，会自动对isActive属性进行切换。在我看到相关文章中，好像在之前的版本中习惯使用内部的state对isActive进行true到false的转换。当然，以上只是一个小问题，最重要的是第二点第二点，NavLink现在的重点确实放在了nav上，按照我的实验，只有当NavLink组件放在用作“顶层导
react路由跳转，实现传参的3种方式：params、search和state
一只程序媛
10-28 5954
一.父页面 import React, { Component } from 'react'; import { Route, Switch, Redirect } from 'react-router-dom' import MynavLink from '../../components/mynavLink' import Message from './message' import News from './news' import Infos from './infos' class Home
react-router-dom5和react-router-dom6的区别
03-30
React Router是一个用于构建单页面应用程序的库。它提供了一种在React应用程序中管理路由的方式。React Router DOM是React Router的一个扩展，用于在Web应用程序中进行路由。 React Router DOM 5和React Router DOM 6之间有几个重要的区别： 1. 安装方式：React Router DOM 5使用npm包管理器进行安装，命令为`npm install react-router-dom`。而React Router DOM 6使用yarn进行安装，命令为`yarn add react-router-dom@next`。 2. 路由组件：在React Router DOM 5中，使用`<Route>`组件来定义路由。而在React Router DOM 6中，使用`<Route>`组件的替代方案`<Routes>`来定义路由。 3. 路由匹配方式：React Router DOM 5使用基于路径的匹配方式来确定哪个路由应该被渲染。而React Router DOM 6引入了新的匹配方式，称为元素匹配（element matching），它可以根据组件的类型来匹配路由。 4. 嵌套路由：在React Router DOM 5中，嵌套路由需要使用嵌套的`<Route>`组件来定义。而在React Router DOM 6中，可以使用嵌套的`<Routes>`组件来定义嵌套路由。 5. 动态路由：在React Router DOM 5中，可以通过在路径中使用参数来定义动态路由。而在React Router DOM 6中，可以使用`<Route>`组件的新属性`element`来定义动态路由。 6. 错误处理：React Router DOM 5使用`<Switch>`组件来处理路由匹配错误。而React Router DOM 6使用`<Routes>`组件的新属性`fallback`来处理路由匹配错误。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值