react路由高亮显示的状态

最新推荐文章于 2023-06-14 16:16:51 发布
最新推荐文章于 2023-06-14 16:16:51 发布
阅读量458 收藏
点赞数
分类专栏： 笔记 react 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxs19930928/article/details/121841783
版权
笔记 同时被 2 个专栏收录
45 篇文章 1 订阅
订阅专栏
react
17 篇文章 1 订阅
订阅专栏 
         <ul>
          <li><NavLink to="/" exact="true" activeclassname="active">首页</NavLink></li>
          <li><NavLink to="/about"  activeclassname="active">关于我们</NavLink></li>
          <li><NavLink to="/login"  activeclassname="active">登录页</NavLink></li>
        </ul>

效果如下

在这里插入图片描述

lxslxskxs
关注
专栏目录
React路由
webchang的博客
12-07 1950
react路由规则，编程式导航，匹配模式，传递参数等
react笔记_10react路由
qq_43260366的博客
12-22 1219
在注册路由时如下：可能有两个甚至多个的路由注册,通过 下面代码 注册路由 当path变为/home时 路由出口的位置展示哪个组件-- Home组件orTest组件or两个都展示？以上是注册的几个路由，但是一进入页面时，匹配不到任何的路由，此时若是我们想进入页面(url为空)时默认展示home组件的内容，可以使用路由重定向。在App.vue(跟组件)注册了 Home路由和About路由，在Home组件注册了 Sun1和Sun2 两个子路由。以下就注册了一个 Home 组件 ，组件路径为/home。
react实现点击选中的li高亮的示例代码
08-27
本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
08-React路由6.3.0(高亮, 嵌套, 参数传递... )
彼岸舞的博客
08-23 341
React-Router-Dom(路由版本[6]) 与5版本的区别 内置组件变化: 移除了<Switch>,新增了<Routes>等 语法的变化: component={About} 改为了 element={About} 新增了多个Hook: useParams, useNavigate, useMatch等 官方明确推荐函数式组件了 添加依赖 yarn add r...
四、【React-Router6】高亮 NavLink
天行健，君子以自强不息
12-02 938
react-router 6 的 高亮 NavLink
设置选中路由的高亮与切换动画
Zyl_CN的博客
10-17 441
&lt;router-link to=''/xx'&gt;xxx&lt;/router-link&gt; 在选中的路由跳转标签上会自动绑上2个类：.router-link-exact-active和.router-link-active这两个类 所以可以在css中直接操作.router-link-active来给予样式   也可以在Vue的实例化中，定义专属的名字 var rtobj=...
React中使用withRouter使侧边栏高亮与页面展示一致
Cinderellahh92的博客
10-27 433
在使用antdUI的侧边栏在刷新页面后路由和侧边栏高亮不一致，那边就需要以下设置 // 在侧边栏页面引入withRouter import { Link, withRouter } from "react-router-dom" class Sider extends Component { render() { const path = this.props.location.pathname return ( <> .
react路由高亮样式
05-19
React Router 提供了一个 `NavLink` 组件，可以用来实现路由链接的高亮样式。具体实现步骤如下： 1. 在导入 React Router 时，同时导入 `NavLink` 组件： ```javascript import { BrowserRouter as Router, Switch...
React 路由详解(超详细详解)
热门推荐
m0_67402823的博客
03-03 3万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
React - 路由 NavLink 使用 与 NavLink 组件封装使用（路由高亮）
技术共享，共同进步！
08-01 1101
React - 路由 NavLink 使用 与 NavLink 组件封装使用（路由高亮）
3.react路由高亮
最新发布
weixin_45414972的博客
06-14 166
333。
react 路由导航选中高亮显示，切换页面高亮跟随
qq_38276682的博客
01-28 7935
在react开发中，路由是react中最强大的功能，我们在做一些导航切换内容的时候，页面不会刷新，但是有的人就会问，我们在切换页面时如何选中高亮显示，在切换浏览器左上角的上一级于下一级的按钮时怎么让高亮显示的颜色跟随对应所显示的内容呢，下面将是你想要的效果。 定义一个状态current，给他一个初始值，这个初始值就是获取的当前地址的名字，之后切换地址是会触发这个history函数，他会接受一个...
React-router、antd实现同步浏览器地址高亮对应菜单
weixin_34319374的博客
12-07 2329
关于 React 和 antd 组件库 React 是目前主流的前端开发框架，目前前端流行的框架是 Angular,Vue,React，具体选型看项目需求而定。 antd 是基于 React 开发的组件库，有蚂蚁金服团队退出，目前使用人数较多，组件也比较多，文档也很友好。 本次我做的就是使用 antd 的 Menu 组件搭配 React，实现浏览器地址改变，高亮对应导航菜单的需求。 具体实现 1....
react路由---navlink解决首页路由高亮重复匹配问题
Debug的博客
08-16 643
这是app.js <Route exact path="/" component={Home} /> <Route path="/underway" component={UnderWay} /> <Route path="/end" component={End} /> <Redirect to="/"></Redirect> 页面中 <NavLink to="/"
react路由配置
susuzhe
08-04 1万+
包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些组件，router文件夹是配置路由用的。 按照顺序来写：detail文件夹下的代码 import React from 'react' class Detail extends React.Component { render() {
antd组件menu根据url实现自动高亮和展开
weixin_46449188的博客
08-27 5170
antd组件menu根据url自动高亮和展开 步骤一：封装构造函数 const MenuItem = Menu.Item; const SubMenu = Menu.SubMenu; //封装一个构造函数 class MenuNode { constructor(menuItem, parent=null) { this.key = menuItem.url || menuItem.auth_name; this.parent = parent; } } 步
react实现选中的li高亮
weixin_34102807的博客
05-23 1974
虽然只是一个简单的功能，还是记录一下比较好。页面上有很多个li，要实现点击到哪个就哪个高亮。当年用jq的时候，也挺简单的，就是选中的元素给addClass，然后它的兄弟元素removeClass,再写个active的样式就搞定了。那现在用react要实现类似的操作，我想到的就是用一个currentIndex,通过判断currentInde...
react中路由和按需加载问题
Frank的博客
12-23 6133
react中路由和按需加载问题1 基本的路由设置react-router可以解决路由问题，只需要添加[基于react-router4.x]yarn add react-router-dom然后在index.js中引入它，使用:import {Link,BrowserRouter,Switch, Route} from 'react-router-dom'; ReactDOM.render((
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lxslxskxs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值