首先先看一下我的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. python3 实现mysql数据库连接池

    首先声明一下,这篇博客进行了通过自己的代码方式,加上这篇博客,最后总结出这段代码.参考博客连接:http://blog.csdn.net/zbc1090549839/article/details/5 ...

  2. 基于jquery的ui选择之路

    选定: 主框架:jqueryUi tree:ztree grid:jqGrid layout:jquery.layout 原由: 还有其他demo,ajax实现等参看连接: 正在做的一个项目选择jqu ...

  3. SSH框架环境搭建问题：Line: 230 - com/opensymphony/xwork2/spring/SpringObjectFactory.java:230:-1

    只是通过myeclipse搭建一个框架而已 启动tomcat时报错信息: File: SpringObjectFactory.java Method: getClassInstance Line: 2 ...

  4. rqalpha-自动量化交易系统（一）

    因为最近做的东西牵涉到自动计算这一块,在网上搜了一下,基本上python做自动量化交易成了一个趋势,于是花了两天学习一下. 目标很简单,学习,使用. rqalpha看起来是比较成熟的,这儿看重的是自带 ...

  5. 备份集中的数据库备份与现有的xx数据库不同”解决方法

    搞定

  6. WebSphere异常：Servlet has become temporarily unavailable for service

    今天发现WebSphere中的一个应用图片看不见了,单独在浏览器中访问图片的路径http://ip地址:9080/应用/--/images/top.jpg,也不显示图片,并且提示异常Servlet h ...

  7. Websphere多个应用session相互覆盖问题解决办法

    原文链接:http://my.oschina.net/moyuqi/blog/98475 使用apache反向代理解决在应用A使用Iframe嵌入应用B的功能而产生的跨域问题后,应用B的功能能正常使用 ...

  8. CI框架伪静态化配置

    CI框架伪静态化配置 伪静态化,即:去掉入口的index.php, 在url后面加上 .html 后缀 CI默认的rewrite url中是类似这样的,例如你的CI根目录是在/CodeIgniter/ ...

  9. Scala学习笔记——入门

    0.在 scala> 下运行Scala程序 首先cd到.scala文件所在的目录下 scalac这个scala文件,然后import package的名字.object的名字 然后就能使用 ob ...

  10. hive 添加自增列

    比如一个表里只有contact字段 ;