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

这是未点击的时候index默认的是选中状态,

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

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

  

解决react-router 的activeClassName 首页重复匹配问题的更多相关文章

  1. [React] React Router: activeStyle & activeClassName

    react-router provides two props for setting a specific style on a Link component whose path matches ...

  2. react router activeclassName 没有显示

    import React, {Component} from 'react' import {NavLink, Switch, Route, Redirect} from 'react-router- ...

  3. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  4. React躬行记(13)——React Router

    在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...

  5. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  6. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  7. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  8. [Web 前端] 你不知道的 React Router 4

    cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...

  9. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

随机推荐

  1. savReaderWriter 模块的使用

    作用: 由于python可以辅助数据分析和数据挖掘,读取文件, 而savReaderWriter模块就是为此而设计. 官网 :http://pythonhosted.org/savReaderWrit ...

  2. if 结构和三目运算和switch语句

    if语句需要注意的地方: if判断只能接一个语句,存在多个语句时,用块语句表示{},若在if判断后 直接加“:”相当于if判断后加一个空语句,即使条件成立什么也不会干! 1. if的第一种形态(真假) ...

  3. 第三百三十一节,web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令

    第三百三十一节,web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令 Scrapy框架安装 1.首先,终端执行命令升级pip: python -m pip install --u ...

  4. Java如何格式化秒数?

    在Java中,如何格式化秒数? 此示例使用SimpleDateFormat类的SimpleDateFormat('ss')构造函数和sdf.format(date)方法格式化秒数. package c ...

  5. com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method

    查看了网友们的错误原因, 需要进行实例化的类没有进行实例化,具体没有实例化的类会在错误信息中显示,在错误信息中搜索“Serializable”即可找到将其实现序列化可消除错误. 是在使用Dubbo提供 ...

  6. 大数据:Spark Core(二)Driver上的Task的生成、分配、调度

    1. 什么是Task? 在前面的章节里描写叙述过几个角色,Driver(Client),Master,Worker(Executor),Driver会提交Application到Master进行Wor ...

  7. gitlab的安装和基本维护

    基本介绍 GitLab是一个自托管的Git项目仓库,可以自己搭建个人代码管理的仓库,功能与github类似. 安装 操作系统:CentOS6.5 gitlab官网下载安装地址:https://abou ...

  8. 使用DUPLICATE 方式创建ORACLE 11G DG备库环境

    我的最佳实践 ① 手动创建好初始化参数文件: *.audit_file_dest='E:\APP\XJXU\ADMIN\ORASTAND\ADUMP'*.control_files='E:\APP\X ...

  9. iOS : 用 InterfaceBuilder 开始一个项目

    1.创建一个 xib 文件 : Main_iPhone.xib 更改 File's Owner 的 Class 为 UIApplication; 添加 1 个 Window .1 个 Object . ...

  10. input框取消光标颜色手机端不生效

    <style> input{ color:transparent; } </style> <input value="我要隐藏光标"> //文字 ...