路由链接高亮（二）——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式

最新推荐文章于 2023-11-17 20:24:21 发布
最新推荐文章于 2023-11-17 20:24:21 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： redux react知识 文章标签： html css reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/118068384
版权

路由链接高亮——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式

  • NavLink 相当于 Link 组件，但是，它自带高亮类名
  • 可以通过 activeClassName 来修改默认的高亮类名
  • 也可以通过activeStyle 来动态添加选中的样式

src/views/Footer.js

<NavLink activeClassName="todos-active" to="/all">
  ALL
</NavLink>

<NavLink activeStyle={{color: 'red'}} activeClassName='selected' to='/all'>全选</NavLink>

选中高亮效果

在这里插入图片描述

viceen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
redux-first-router-link:+ 镜像React路由器的+其他一些道具
05-14
redux-first-router-link 更新（2017年7月1日）：我们现在有一个NavLink包，例如react-router，以显示链接的活动样式。 安装 yarn add redux-first-router-link 用法 import Link from 'redux-first-router-link' // as a standard href path string: < Link to = '/list/db-graphql' > DB & GRAPHQL < / Link > // as an array of path segments: < Link to = { [ 'list' , 'react-redux' ] } > REACT & REDUX < / Link> // as an action object (RECOMMENDED APPROA
webVueBlog#Leetcode#react_NavLink使用1
07-25
import React, { Component } from 'react'import { NavLink } from 'react-router-do
React Router中Link和NavLink的学习总结
热门推荐
冰雪为融的博客
05-18 4万+
Link现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了&lt;Link&gt;组件用来避免这种状况发生。当 你点击&lt;Link&gt;时，url会更新，组件会被重新渲染，但是页面不会重新加载嗯、先看个例子import {Link} from 'react-router-dom'; const Header = ()=&gt...
React实现原生导航栏----＜NavLink＞的使用
九月萩的博客
07-30 1454
说明 最近在实习中，被React项目中导航栏困住了，项目中需要点击导航栏中某一处，进行路由跳转，使用Antd的导航栏，虽然能跳转，但是需要点击两次，效果不好（与我个人实力有关），虽然有大佬给我的代码参考，他们也是用的Antd，但是我没有看懂，换了多次关键词搜索。 搜索“react 导航跳转页面”关键词的结果中，我看到了这篇文章： 《react实现点击导航部分页面跳转（路由）》 虽然没有解决我的问题，但是看到了NavLink，于是把这个作为关键词，在搜索结果中，得到了这两篇文章的帮助。 《React Rout
react实现底部固定菜单栏
Buddha_ITXiong的博客
06-01 8696
在项目中经常会碰到这种需求，底部固定的菜单栏目，本来是想直接用react-router-dom组件的navLink来实现的，因为navLink组件有个属性 activeClassName设置选中样式，默认值为active,通过这个直接给选中的当前页面添加一个选中的样式即可，但是因为我想在里面加入一个图标，这就涉及到图标也要切换了，捣鼓了一下也不知道怎么用navLink来实现，最后就只能自己来写了。...
react-router6.0新版本 NavLink中activeClassName是无效的
m0_69892739的博客
12-05 428
在使用react-router6.0版本，实现一个点击切换样式，使用activeClassName是没有效果的。：是因为6.0版本官方已经不再支持activeClassName这种写法，需要换成动态设置className。
使用react-router-dom中的＜NavLink＞activeClassName报错
chloecode的博客
12-09 909
需求：点击对应按钮实现高亮 报错代码： demo是高亮对应的样式类名 <NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink> <NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink> 报错信息： 说react.
react中设置activeClassName的笔记
最新发布
小墨蛇的博客
11-17 691
React是一种流行的JavaScript库，用于构建动态用户界面。它具有许多有用的组件，其中之一是NavLink组件。NavLink组件用于在React应用程序中创建链接，并且它具有许多有用的属性，例如选中的样式设置。
0603基础使用（二）-react路由-react
gaogzhen的博客
04-26 472
0603基础使用（二）-react路由-react
React 中NavLink 的使用
weixin_45677987的博客
07-06 3595
React 框架中 NavLink 的使用: 通过NavLink可以给Link添加类名，从而实现修改样式 <Nav-Link activeClassName="my-active"className="nav-link" to="/home" component={Home}> 未按待续.....
react-router:react-router 用法及封装路由权限验证高阶组件
04-30
所有通过路由渲染的组件属性中会多三个属性 history， match， location 可以通过 this.props.history.push('/user/list') 跳转路径 withRouter 把当前组件包装成一个Router组件 是一个高阶组件，通常通过路由渲染的...
react-epic:浏览地址：
05-06
Link（/NavLink） 用作路由跳转，相当于链接。路由官方给 React-Router 的主要成分：路由器(routers)： , 路线匹配者(route matchers): , 导航,也叫路线更改者(navigation): <Link>, <Na
【JavaScript源代码】无废话快速上手React路由开发.docx
12-29
无废话快速上手React路由开发 　输入以下命令进行安装：　// npm　npm install react-router-dom　// yarn　yarn add react-router-dom　react-router常用的组件有以下八个：　import { BrowserRouter,　HashRouter,...
react-router-tutorial:React Router的简单教程
03-12
React路由器教程一个关于React Router的简单教程。 从“ create-react-app”创建开始如果您想继续学习本教程，请在... 添加到“ Header.js” 从“ react-router-dom”导入{NavLink} 主页关于联系方式NavLinks是一个re
Material-UI-Test-App
03-18
test_frontend_den运行该应用程序：用yarn install安装依赖项纱线开始运行应用程序该应用程序的永久用户位于“ src / shared / users.js”：对项目未完成部分的评论：对于主页，应该有两个附加页面：分别具有路由“ ...
react 中的路由 Link 和Route和NavLink
weixin_30707875的博客
06-03 572
route是配置，link是使用 https://blog.csdn.net/chern1992/article/details/77186118（copy） 嵌套路由一般使用Route,类似于vue中的作为嵌套路由的渲染，可以直接通过固定路由进入某一局部，等同于局部切换 // index.js // ... render(( <Router history={hashH...
第三十二章 React路由组件的简单使用
天界程序员的博客
05-10 1572
关于路由组件的一些使用以及它们之间的区别，以及编程式的路由使用
Material-UI menuItem和NavLink组合使用时的样式控制
weixin_33705053的博客
11-02 574
最近在使用material-ui做左侧导航的时候遇到了一点难缠的小问题，由于传统中a标签包裹子元素组成链接的思维习惯，加上MenuItem标签不能包裹子元素，导航部分一开始采用NavLink包裹MenuItem的结构： [/*data*/].map(link => <NavLink key={link.ic...
NavLink组件
weixin_42260975的博客
03-26 1783
react-router之NavLink组件 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ 1–<Link>的一个特殊版本，当呈现的元素与当前URL匹配时，它将向其添加样式属性。 2–...
react中的Navlink怎么实现路由高亮
06-05
3. 在组件的 render 方法中使用 NavLink 组件，并设置 activeClassName 属性为路由高亮时要添加的 class 名称。 ```javascript render() { return ( <NavLink to="/" activeClassName="active">Home</NavLink> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值