首先先看一下我的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. IDEA中maven项目导jar包太慢

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/PROGRAM_anywhere/article/details/53842058参考了网上的一些教程 ...

  2. MFC绘图小实验（3）

    1,使用默认的文本背景模式,在点(-200,20)处输出黄底红字“Computer Graphics Based on VC++”;在(50,20)处输出黄底红字“BoChuang Research ...

  3. 第三百五十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点

    第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题

  4. 第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息

    第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多 ...

  5. e805. 监听JProgressBar的数值变化

    Whenever the value of a progress bar is changed, a change event is fired. In fact, the event is also ...

  6. logbook日志系统

    python中替代logging的日志系统. 不过比之前的logging难理解. 先上打印到屏幕上的代码和存到日志文件中的代码: #!/usr/bin/env python3 # -*- coding ...

  7. unity5x --------Music Mixer参数详解

      我们一直在致力开发出业界最顶尖水准音频处理功能,而经过很长一段时间的努力,在Unity5.0中,音频处理功能将成为非常重点的一个功能. 要达成这个目标,我们首先重写了很多Unity中音频相关得处理 ...

  8. 【转帖】如何在redhat单机服务器上运行postgresql的多个实例（howto run multiple postgresql instance on one redhat server）

    Running multiple PostgreSQL 9.2 Instances on one server in CentOS 6/RHEL 6/Fedora 原帖网站速度很慢,故转帖在此 Thi ...

  9. UNIX环境编程学习笔记（2）——文件I/O之不带缓冲的 I/O

    lienhua342014-08-25 1 文件描述符 对于内核而言,所有打开的文件都通过文件描述符引用.文件描述符是一个非负整数.当打开一个现有文件或创建一个新文件时,内核向进程返回一个文件描述符. ...

  10. mongoose实现批量删除和多id查询的api/方法

    删除一条数据:传入id Model.remove({ _id: 传入的id }); 删除多条数据,传入id数组,使用$in方法 Model.remove({ _id: { $in: ['aID', ' ...