首先先看一下我的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. Entries missing in table T028G T-CODE: OT51 SAP 传输配置操作为用户操作 SAP网银接口

    change this setting as a 'current setting' according to SAP note '135028 - Transfer IMG activity to ...

  2. (笔记)Linux内核中ioremap映射的透彻理解

    几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器.状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址.根据CPU体系结构的不同,CPU对IO端口的编址方式有两种: (1)I ...

  3. JDBC删除表实例

    在本教程将演示如何在JDBC应用程序中删除一个数据库表. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式中删除数据库表. 要执行以下示例,需要用实际用户名和密码替 ...

  4. JavaScript数据去掉空值

    js数组中过滤掉false, null, 0, "", undefined, and NaN值的方法 对于 false,null,0,undefiend,NaN直接取!得到的都是t ...

  5. Xianfeng轻量级Java中间件平台：权限管理

    权限管理:是通过系统对用户的行为进行控制的一套业务规则,可以做得很简单,比如通过硬编码的方式进行控制,也可以做得很复杂,比如通过一些复杂的权限模型去实现一些复杂的权限控制,比如菜单访问权限.按钮操作权 ...

  6. RHEL 7 中 systemctl 的用法（替代service 和 chkconfig）

    1.systemctl是RHEL 7 的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体.可以使用它永久性或只在当前会话中启用/禁用服务. systemctl可以列出 ...

  7. CorelDRAW X7绘制可爱的卡通动漫多啦A梦

    今天小编为大家分享CorelDRAW X7绘制可爱的卡通动漫多啦A梦方法,教程绘制出来的哆啦A梦非常可爱,适合新手来学习,推荐过来,来看看吧! 1.新建文件 新建A4大小横向画布,双击“矩形工具”绘制 ...

  8. C# 实现数字字符串左补齐0的两种方法

    ); MessageBox.Show(sss); return; 代码如上,自动补齐前面的0

  9. MySQL错误ERROR 2002 (HY000): Can't connect to local MySQL server

    From: http://www.jb51.net/article/56952.htm 这篇文章主要介绍了MySQL错误ERROR 2002 (HY000): Can't connect to loc ...

  10. 二维数组按某个键值排序 FOR PHP

    $arr=[ array( 'name'=>'小坏龙', 'age'=>28 ), array( 'name'=>'小坏龙2', 'age'=>14 ), array( 'na ...