react-router-dom中NavLink用法

最新推荐文章于 2023-12-06 13:54:54 发布
最新推荐文章于 2023-12-06 13:54:54 发布
阅读量1.9k 收藏
点赞数
分类专栏： React 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45578112/article/details/108821608
版权

在react-router-dom中为我们提供了一个NavLink的组件，组建中含有一个名为activeClassName的属性，可以很方便的为我们提供路由切换时的选中效果

NavLink

使用NavLink时，其用法与Link无太大区别，在需要实现点击切换className时，可以用NavLink代替Link简化操作，并将需要点击后激活的ClassName值放到NavLink标签的activeClassName中即可，比如下方代码中让 li 标签点击后激活active-menu的class值


 <li>
     <NavLink to="/" activeClassName='active-menu'>
         <i className="fa fa-dashboard"></i>
         <span>首页</span>
     </NavLink>
 </li>

NavLink的原理是根据当前的路径来匹配NavLink中的to的值，匹配成功是就将activeClassName中的值添加到当前标签的className里，因而需要进行精确匹配以防显示bug

spcming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router-dom ＜NavLink＞ v6用法
weixin_45388599的博客
01-08 1949
react-router 的<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
React-Router实战：NavLink
若水弹丸之地
03-23 6505
基础： （1）引入使用： import { NavLink } from 'react-router-dom' <NavLink to="/about"> About </NavLink> （2）activeClassName：string //当被激活时，显示类名为selected 的css样式 <NavLink to="/about" activ...
react-router-dom中link与Navlink
一条宝鱼的专栏
12-14 1175
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 之 Link 与NavLink
smaller_coder的博客
11-01 2161
本文主要记录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中的NavLink的使用
最新发布
qq_51715571的博客
12-06 606
NavLink、组件、标签体内容作为属性
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
react-router-dom 版本6.18.0中NavLink的api和属性介绍
小墨蛇的博客
11-17 1095
有时候，我们希望 NavLink 的激活状态不仅仅是路径匹配，还要满足一些其他的条件，这时可以使用 isActive 属性。// 自定义激活状态的逻辑这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。使用逻辑
react-router-dom使用指南
qq_41120857的博客
11-15 260
类似于 Link 组件，但具有更多的激活状态属性。可以自定义被选中时应用的样式，通过 activeClassName 属性来设置被选中时被附加的 class，以及通过 activeStyle 属性来配置被选中时应用的样式。路由模式共有两种，分别为 历史（BrowserRouter）和 哈希（HashRouter）。并在RouterProvider组件的router参数提供对应模式的方法。在src目录下创建router目录，之后在router目录下创建。在代码逻辑中调用，创建对象后，传入路径参数即可。
React 之 react-router-dom
subsistent的博客
08-19 5876
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
[Layout] is not a ＜Route＞ component. All component children of ＜Routes＞ must be a ＜Route＞ or ＜
qq_37031892的博客
07-04 2972
问题描述： 在设置react路由时，有个非路由组件要和部分路由绑定显示，因此使用二级路由。但是v6版本Routers不支持嵌套非路由组件，因此报错！ 代码： 解决方法： 将Layout封装成组件，通过来进行跳转，并配置path属性。 修改后代码： 注意！！！： v6版本的path为严格匹配，因此如果path=‘/‘则无法访问内部的二级路由，应采用path=’/*’，*通配符进行路由设置。...
NavLink组件
weixin_42260975的博客
03-26 1879
react-router之NavLink组件 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ 1–<Link>的一个特殊版本，当呈现的元素与当前URL匹配时，它将向其添加样式属性。 2–...
NavLink与NavLink的封装
qq_39840183的博客
08-06 755
关于NavLink： NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 标签体内容是一个特殊的标签属性 通过this.props.children可以获取标签体内容 <NavLink>比<Link>更高级一点，可以使谁点哪个就会给哪个追加一个active属性，也可以通过activeClassName属性来重新设置样式，加上!import 封装NavLink： 优化后的代码： 封装的NavLink组件：
React漫漫学习路之 React Router
dingzhengbo69534的博客
11-24 149
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。 引用 react-router 　　　　　　 // React Router 核心 react-router-do...
React.js学习（九）、React-router-dom使用（NavLink，NavLink封装，Switch，多级刷新，匹配，重定向）
黄孝果的博客
02-26 833
NavLink与Link区别 1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 {/* 在React中靠路由链接实现切换组件--编写路由链接 */} <NavLink activeClassName="huang" className="list-group-item" to="/about">About</NavLink> <NavLink activeClassName="huang" className="list-gro.
react-router-dom使用指南（最新V6）
江咏之
08-17 2477
通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为/的为绝对路径，反之为相对路径。可以在任何组件中使用Routes组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。注意：此时定义父组件的路由时，要在后面加上/，否则父组件将无法渲染。}使用useRouteshook，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于useRoutes的返回是 React Element，或是 null。children?element?index?...
如何在 React 中创建多级下拉菜单
分享身边生活经验blog
09-25 2488
调试助手TV正式版，全新影视资源接口，高清免费电视盒子！编者注：这篇文章已于 2022 年 8 月 17 日更新，以更新代码示例和项目说明，并添加有关多级菜单与巨型菜单和实现菜单项路由的部分。多级下拉菜单是网页设计的主要内容。由于能够提供多个选项以供选择，它们使导航栏变得动态和有条理。对于任何在 React 或任何基于 React 的项目（如 Gatsby 或 Next.js）中工作的开发人员，本教程将逐步介绍如何在 React 项目中实现下拉功能。
react中的Link和NavLink的区别
weixin_47164846的博客
10-12 3532
react中的Link和NavLink的区别 Link 现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了组件用来避免这种状况发生。当 你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载 嗯、先看个例子 // to为string <Link to="/my">我的</Link> // to为obj <Link to={{ pathname: '/my', search: '?sort=n
React 中NavLink 的使用
weixin_45677987的博客
07-06 3708
React 框架中 NavLink 的使用: 通过NavLink可以给Link添加类名，从而实现修改样式 <Nav-Link activeClassName="my-active"className="nav-link" to="/home" component={Home}> 未按待续.....
react-router-dom使用NavLink遇到问题
qq_44983621的博客
09-28 1239
react-router-dom使用NavLink遇到问题 在使用react-router-dom是一直提示这个错误 Stateless function components cannot have refs.（无状态功能组件不能具有引用）。 在一番调试下发现是再重绘时NavLink 出现问题，把这个换成a标签这就没有了这个问题，但这个并不是我想要的效果，于是又在网上开始查阅各种相关的知识。 ...
react-router-dom和router区别
06-07
React Router 是 React 应用程序中的路由库，它允许你在不刷新页面的情况下动态地渲染组件。 React Router 库包含了多个组件，其中包括 Router、Route、Switch 和 Redirect 等。 而 react-router-dom 是基于 React Router 的 Web 版本，它提供了一些额外的组件，比如 Link 和 NavLink，用于在应用中进行导航。 react-router-dom 还提供了一些针对 Web 平台的特性，比如 BrowserRouter 和 HashRouter 等。 因此，React Router 是 React 应用程序中的路由库，而 react-router-dom 则是基于 React Router 的 Web 版本，提供了一些额外的组件和 Web 平台特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值