解决react-router 的activeClassName 首页重复匹配问题

最新推荐文章于 2024-05-26 10:48:50 发布
最新推荐文章于 2024-05-26 10:48:50 发布
阅读量460 收藏
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog_hjkhkck1aibb.html
版权

首先先看一下我的inedx.js入口文件：

1083235-20180821135826687-464581985.png

这是未点击的时候1083235-20180821135849477-716245930.pngindex默认的是选中状态，

这是我点击其他的路由之后：1083235-20180821135923581-1948934131.png，明显index路由重复了，仔细看了官方文档之后，发现其实Navlink也应该使用exact进行精确的匹配：

 

  <NavLink exact to="/" activeClassName="link-active">index</NavLink>

　　

 

辛苦的码农20200609
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-Router
04-05
React-Router 是React生态系统中的一个核心库，用于处理React应用中的路由管理，使得单页应用程序（SPA）可以方便地在不同的视图之间导航。在React应用中，它扮演着连接UI与URL的角色，使得URL的变化能够同步更新UI...
react-router学习demo
02-28
React Router 是 React.js 生态系统中的一个核心组件，它允许你在单页应用（SPA）中管理页面路由。这个“react-router学习demo”很可能是为了帮助开发者深入理解如何在React项目中实现路由导航功能。React Router ...
react router activeclassName 没有显示
a50270的博客
11-13 392
import React, {Component} from 'react' import {NavLink, Switch, Route, Redirect} from 'react-router-dom' import About from '../views/about' import Home from '../views/home' export defau...
react路由---navlink解决首页路由高亮重复匹配问题
Debug的博客
08-16 629
这是app.js <Route exact path="/" component={Home} /> <Route path="/underway" component={UnderWay} /> <Route path="/end" component={End} /> <Redirect to="/"></Redirect> 页面中 <NavLink to="/"
React 路由5版本的使用详解(基于Class类版本的使用react-router-dom@5)
最新发布
qqqqqqqq188的专栏
05-26 308
1.route 有两个属性,一个是path 代表路径,一个是component代表组件。2.NavLink 中的activeClassName 设置选中状态的类名。######6. React-Router-Dom 编程式导航。1.NavLink和Link 都有 to 代表跳转的属性。1.属性from 从那个页面来，属性to重定向哪个页面去。1.push 跳转+携带params参数。2.push跳转+携带search参数。3.push跳转+携带state参数。2.search参数模式。
React嵌套路由、路由懒加载、编程式导航、withRouter、路由封装
爱敲代码的狼仔
11-15 1280
嵌套路由 1、嵌套路由的地址必须在父路由的基础上编写，不可以独立编写 2、Route的定义位置，决定了嵌套组件内容渲染的位置 就是在子组件当中添加路由占位和路由连接部分 import React, { Component } from 'react' import {Route,Link} from 'react-router-dom'​ import PENews from './PENews' import HappyNews from './HappyNews' import ChinaNe
react中的路由使用
qq_47872824的博客
03-03 941
路由的原理和使用
react-router6.0新版本 NavLink中activeClassName是无效的
m0_69892739的博客
12-05 469
在使用react-router6.0版本，实现一个点击切换样式，使用activeClassName是没有效果的。：是因为6.0版本官方已经不再支持activeClassName这种写法，需要换成动态设置className。
react-router-dom1:react-router-dom官方示例，基本使用
05-11
React Router Dom是React应用中的路由管理库，它允许我们在单页面应用中实现页面间的导航而无需重新加载整个页面。在本教程中，我们将深入探讨如何使用`react-router-dom`进行基本配置和使用。 首先，安装`react-...
react-router中Link/的属性详解
11-29
在React Router库中，`Link`组件是一个至关重要的部分，它允许用户在应用程序的不同路由之间进行导航，同时提供了丰富的属性来定制其行为。本文将详细解释`Link`组件的几个关键属性及其用法。 首先，`Link`组件的`...
react-router-study
03-30
React Router 是一个用于管理React应用中页面路由的库，它使得在React组件之间导航变得简单且优雅。在React应用中，路由是应用状态的一部分，它决定了用户在不同URL下看到哪些组件。`react-router-study`这个项目...
react路由跳转导致组件两次重复挂载
qq_36990322的博客
06-29 4003
react路由跳转导致组件两次重复挂载 问题 在使用react的history.push()方法进行路由跳转时，组件重复加载两次。代码案例如下： this.props.history.push(`/xxx/xxxx?title=参数`) 后面多次检查代码后发现，是在使用history.push()方法时，参数值为中文才会出现该问题，其他类型则不会出现该问题。 原因 仔细追究其原因，应该是在进行带参数跳转时，浏览器会自动对中文进行转码，然后又会导致router的history方法监听浏览器地址栏变化。也就
react-router6.0版本 NavLink中activeClassName无效
小怪獸丶的糖的专栏
12-08 1644
版本使用的是6.0的react-router，想实现的效果是菜单点击高亮显示。使用activeClassName设置高亮的class 名称时。没有效果 问题原因：6.0版本官方已经不再支持activeClassName这种写法了，换成动态设置className即可 <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " mactive" : "")} to="/about">
react-router的改变（下）
qiangzhedc的博客
07-20 368
(这里的Router组件都表示BrowserRouter组件) 二）Route组件： 定义：寄居在路由器内的路由组件； 语法： 参数解释： methods： 1）component：外导组件      语法： 2）render：内联组件，路由组件自身渲染；      语法：{ ... return 组件}} props： 1）path：String，识别的路由路径； 2）e
react-router 的理解和使用
huangjianfeng21的博客
07-08 896
路由的理解 一个路由就是一个映射关系(key:value)。key为路由路径, value可能是function/component（某个对象的组件） 后台路由 node服务器端路由, value是function,用来处理客户端提交的请求并返回一个响应数据 注册路由router.get(path, function(req, res))。当node接收到一个请求时,根据请求路径找到...
React-router4的简单理解
汉堡请不要欺负面条
07-20 5668
  了解更多请参阅 v4 文档 一.介绍     1.说明        react-router4是React官方推挤路由库，4是最新版本。和之前版本不兼容，浏览器和RN均兼容React Router 4.0 （以下简称 RR4） 已经正式发布，它遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（引入即用），可组合性...
使用react-router-dom中的＜NavLink＞activeClassName样式不生效
sinat_15625949的博客
11-05 2684
问题 使用react-router-dom中的<NavLink>切换页面时activeClassName样式不生效 原因 本地react-router-dom包已经更新到最新6.0.0-beta.8版本，beta版本不稳定 解决方法1 由于beta版本不稳定，建议回到稳定版本V5.3.0 解决方法2 使用最新版本react-router-domV6.0.0以上，可以通过className和style属性进行修改active状态。 两个属性都是通过箭头函数接收到isAc
React Router详解
weixin_45615650的博客
05-13 3056
在学习react-router时，应该对比着以前学习的router相关知识进行学习，比如：路由跳转，路由传参，路由重定向等，接下来会对react-router的学习进行记录，如果存在错误请谅解！ 在react的项目中需要在根目录下对react-router进行下载： npm i react-router-dom 下载后需要对Route进行引入，是个内置的组件。该组件是有两个属性一个是path，一个是component，path是组件对应的路由，component是对应的组件 import { Route
react-router-dom react-router-config 安装失败
01-13
您可以尝试以下步骤来解决react-router-dom和react-router-config安装失败的问题： 1. 确保您已经正确安装了Node.js和npm。您可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 确保您...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值