首先先看一下我的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. 关于Unity中Shader的使用

    在游戏的开发过程中,程序员不太会自己去写shader,因为写起来很麻烦,而且只有Unity会报错,编译器也没有什么提示. 通常是拿别人的shader改一改,当然,程序员还是要能看懂和会一点shader ...

  2. 关于Unity中坐标系的种类

    坐标空间 1:物体空间: 3D物体自己的坐标空间 一般设计时几何体以中心为原点,人物以双脚为原点; 2: 世界空间: 3D物体在场景中的世界坐标, 整个游戏场景的空间; 3: 摄像机空间: 以观察摄像 ...

  3. python递归评论tree形图代码

    首先我有必要记录下来这段代码,因为我遇到了这个问题, 然后没有解决 后来, 前段说我找到一段代码给我看看, 我并没有在意, 然后她实现了, 她实现了,她真的实现了, 我... 为了感谢她,我陪她玩了一 ...

  4. [转载]在澳洲做IT人士的收入差别

    澳洲跟中国一样高税收,但最大的好处是,福利返还很多:1.如果家里有孩子,每2周会有各种税收福利,就是所谓的family tax benefits (a/b):2.每财年结束还有退税:3.看病不用钱,因 ...

  5. C# 使用XPath解析网页

    1.需要安装库HtmlAgilityPack ,官网http://htmlagilitypack.codeplex.com/ // From File var doc = new HtmlDocume ...

  6. Linux CPU Load Average

    理解Linux系统负荷 LINUX下CPU Load Average的一点研究 Linux load average负载量分析与解决思路 Understanding Linux CPU Load - ...

  7. POJ 3481 Double Queue(STL)

    题意  模拟银行的排队系统  有三种操作  1-加入优先级为p 编号为k的人到队列  2-服务当前优先级最大的   3-服务当前优先级最小的  0-退出系统 能够用stl中的map   由于map本身 ...

  8. DATGRIDVIEW如何不选择第一行，第一列

    DataBindingComplete事件中写 ClearSelection();

  9. VueJs中 Class 与 Style 绑定

    绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}",但是我们不推荐这种写法和 v-bind:cla ...

  10. 获取 SharpSvn 执行 svn 操作的实时日志

    1 获取 SharpSvn 操作日志的方式 之前一篇随笔(使用 SharpSvn 执行 svn 操作)讲到可以通过声称一个绑定到一个 SvnClient 对象的 SvnClientReport 对象. ...