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

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

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

  <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. 求 pi 的近似值题型汇总

    (注:暂时先记录这些问题,后期会持续更新) 一.用格雷戈里公式计算π的近似值,精度要求:最后一项的绝对值小于0.00001 1,用while循环实现 int denominator,flag; dou ...

  2. Spring系列(二)：Spring IoC/DI的理解

    这几天重新学习了一下Spring,在网上找了相关的ppt来看,当看到Spring IoC这一章节的时候,先大致浏览了一下内容,有将近50页的内容,内心窃喜~QAQ~,看完这些内容能够对IoC有更深层次 ...

  3. numpy中dtype

    简单说明dtype使用方法: Rule为规则类,其中有3个字段,1为类型,2为计算规则,3为保留位数 如 :'close': Rule(float64, 1 / 10000.0, 2), 表示收盘价, ...

  4. freetds设置超时

    freetds的超时一般在其配置文件中有设置,实际上程序中也可以设置,动用两个api dbsetlogintime dbsettime 设置在dbopen之前,如下所示: 表示设置登录超时5秒,读写超 ...

  5. MySql 存储过程总结

    MySql 存储过程 -- ---------------------------- -- Procedure structure for `proc_adder` -- -------------- ...

  6. 九章算法：BAT国内班 - 课程大纲

    第1章 国内笔试面试风格及准备方法 --- 分享面试经验,通过例题分析国内面试的风格及准备方法 · 1) C/C++部分: 实现 memcpy 函数 STL 中 vector 的实现原理 · 2)概率 ...

  7. Linux语言设置修改乱码

    1.system-config-language 命令语言改成英文.(安装yum install  system-config-language) 如何系统安装后,使用的语言不是自己想要的.但是在图形 ...

  8. gradle 的安装

    前言: 我不是一个勤奋好学的人,奔着新技术就跑去尝试学习.但是在工作或者学习的过程中,遇到了的技术,还是得一个坎一个坎的迈过去.把今天遇到的坎变成明天的垫脚石. 想学习一下 spring 的源码,然后 ...

  9. Tomcat域名绑定

    域名绑定与虚拟目录设置: conf/server.xml 的修改方式如下: 单个域名绑定: 原始: <Engine name="Catalina" defaultHost=& ...

  10. #AOS应用基础平台# 实现了在用户权限范围内自己定义的快捷菜单的导航展示

    from=501" style="color:rgb(255,131,115); padding:0px; margin:0px; font-family:微软雅黑,Verdana ...