react 路由导航选中高亮显示，切换页面高亮跟随

最新推荐文章于 2024-03-25 01:46:48 发布
置顶 最新推荐文章于 2024-03-25 01:46:48 发布
阅读量7.8k 收藏 7
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38276682/article/details/86674455
版权

在react开发中，路由是react中最强大的功能，我们在做一些导航切换内容的时候，页面不会刷新，但是有的人就会问，我们在切换页面时如何选中高亮显示，在切换浏览器左上角的上一级于下一级的按钮时怎么让高亮显示的颜色跟随对应所显示的内容呢，下面将是你想要的效果。

在这里插入图片描述
定义一个状态current，给他一个初始值，这个初始值就是获取的当前地址的名字，之后切换地址是会触发这个history函数，他会接受一个参数，而event.pathname这个参数就是点击当前link链接的地址，获取到后更改current状态。
在这里插入图片描述
然后给这个导航组件的selectedkeys赋值，点击导航就会显示当前高亮，刷新也不会消失，切换页面也不会消失，会跟随内容显示在这里插入图片描述

wzj_cool
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
react点击高亮，刷新页面对应到相应导航item高亮
江湖的博客
08-07 2341
页面上顶部导航栏，要实现1.点击到哪个就哪个高亮 2.刷新页面时可以定位到对应高亮页面的导航。 用react要实现类似的操作，主要就是用currentTarget定位到currentIndex,通过判断currentIndex在哪个元素实现切换。 实现思路： 1.点击高亮 给元素添加一个index标志位，然后点击的时候，把这个index用event.currentTarget.getAttribute('index')取出来，然后去设置currentIndex的值，再写一写css的active样
react+antd函数式组件和类式组件实现浏览器回退导航菜单跟随高亮
布克吉的博客
06-15 709
react+antd函数式组件实现浏览器回退导航菜单跟随高亮
04 React 样式控制高亮完整案例
最新发布
保持学习的态度
03-25 256
【代码】04 React 样式控制高亮完整案例。
React 设置链接高亮方法
凯扣叮博客
04-22 968
1、使用NavLink标签代替Link NavLink会自动给a标签添加active的类 2、NavLink 有一个属性叫activeClassName 可以自定义当前点击的标签的类名
React-router、antd实现同步浏览器地址高亮对应菜单
weixin_34319374的博客
12-07 2291
关于 React 和 antd 组件库 React 是目前主流的前端开发框架，目前前端流行的框架是 Angular,Vue,React，具体选型看项目需求而定。 antd 是基于 React 开发的组件库，有蚂蚁金服团队退出，目前使用人数较多，组件也比较多，文档也很友好。 本次我做的就是使用 antd 的 Menu 组件搭配 React，实现浏览器地址改变，高亮对应导航菜单的需求。 具体实现 1....
04-React路由5版本(高亮, 嵌套, 参数传递... )
彼岸舞的博客
08-23 329
React-Router-Dom(路由版本[5]) 简介 React的一个插件库 用于实现SPA应用 基于React的项目基本都用 API <BrowserRouter> <HashRouter> <Route> <Redirect> <Link> <NavLink> <Switch> 其它 his...
Ant Design 控制Tabs标签页 哪页高亮
weixin_41813970的博客
07-10 5120
项目上遇到一个关于Ant Design Tabs标签页问题。 项目背景：用户个人中心包括基本信息、我的钱包、我的订单、消息与通知四个模块(如下左图)；需求为该用户提交完订单，跳转到我的订单模块(如下右图)，但是项目中个人中心是一个组件，基本信息、我的钱包、我的订单、消息与通知是四个小组件，所以只能调到个人中心组件，且默认跳到基本信息。这是不符合需求的。 为了解决该问题，我先在提交页面跳转时...
react实现点击选中的li高亮的示例代码
08-27
我们可以使用 state 存储当前索引，使用 className 实现高亮效果，使用事件处理函数处理点击事件，使用 JSX 语法渲染目录列表，使用 CSS 样式实现高亮效果，使用 React 的生命周期方法和事件机制来实现该功能。
react中实现搜索结果中关键词高亮显示
10-18
主要介绍了react中实现搜索结果中关键词高亮显示,使用react实现要比js简单很多，方法都是大同小异，具体实现代码大家跟随脚本之家小编一起看看吧
详解如何给React-Router添加路由页面切换时的过渡动画
12-03
那在React中应该如何给路由切换添加过渡动画呢？ react-transition-group 我们需要借助React的官方动画库react-transition-group，文档戳这里 react-transition-group提供了三个React组件，分别是，<CSS
基础-React实现tab切换
Alisane的博客
09-29 752
nav.jsx如下： import React from 'react'; import "./css/nav.css" class TabsControl extends React.Component { constructor() { super() this.state = { currentIndex: 0 ...
四、【React-Router6】高亮 NavLink
天行健，君子以自强不息
12-02 851
react-router 6 的 高亮 NavLink
react-router-dom6学习9-菜单高亮
qq_41632427的博客
08-15 257
r
3.react路由高亮
weixin_45414972的博客
06-14 128
333。
React Router 6
qq_39206750的博客
03-28 1314
Router6 1. 一级路由改动 注册 Route 时必须要包裹 Routes 注册组件中的 component 改为 element //旧版 <Route path={'/home'} component={Home} /> //新版 <Routes> <Route path="/about" element={<About />} /> <Route path="/home" element={<Home />} /> <
React实现文字高亮
weixin_43846024的博客
12-14 1424
react实现高亮，剔除html标签部分
vue + element 左侧导航栏选中子级，父级高亮问题了
shumabaobei1214的博客
09-07 3604
在element 当中，我们选中了子级（二级菜单），有高亮，但是对应的父级（一级菜单）没有任何选中状态。如图 但是在项目中，一般情况都会让对应的父级也呈现高亮的状态。如图，人员管理为一级菜单 =》人员档案为二级菜单 （为了效果明显，给的比较显眼的背景色），第一个图是展开的样式。第二个是收缩起来的样式（职位管理深灰色，是触摸上去的样式） 其实在element钟，功能都是有的，选中会有个类名，只是没有给他添加样式，只需要在你写导航栏页面给他添加以下样式就可以了。 //对应子级，...
React学习五（页面路由）
qq_44872688的博客
03-16 2898
文章目录一、前端路由二、hash模式三、history模式四、两种路由方式的差异五、React的页面路由模块：react-router-dom的使用1、安装2、实现路由模式的组件（决定路由模式）3、Route组件4、Router组件5、Link和NavLink组件（1）Link组件（2）NavLink组件6、Redirect组件7、Switch组件8、withRouter组件9、404视图六、react-router-dom实现路由示例 一、前端路由 1、从用户的角度看，前端路由主要实现了两个功能（使用a
react路由高亮样式
05-19
React Router 提供了一个 `NavLink` 组件，可以用来实现路由链接的高亮样式。具体实现步骤如下： 1. 在导入 React Router 时，同时导入 `NavLink` 组件： ```javascript import { BrowserRouter as Router, Switch, Route, NavLink } from "react-router-dom"; ``` 2. 在页面中使用 `NavLink` 组件来创建路由链接，同时设置 `activeClassName` 属性来指定高亮时的样式类名。 ```javascript <NavLink exact to="/" activeClassName="active-link"> Home </NavLink> <NavLink to="/about" activeClassName="active-link"> About </NavLink> <NavLink to="/contact" activeClassName="active-link"> Contact </NavLink> ``` 上面的代码中，如果当前路由与 `to` 属性指定的路径匹配，则会自动添加 `activeClassName` 属性指定的样式类名。 3. 在 CSS 中定义 `active-link` 样式类，来指定高亮时的样式。 ```css .active-link { color: red; font-weight: bold; } ``` 这样就可以实现 React Router 路由链接高亮的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值