首先先看一下我的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. yizhihx ubuntu config

    install shadowsocks:http://www.cnblogs.com/huangshiyu13/p/8973967.html download: https://pan.baidu.c ...

  2. 【CUDA学习】内核程序调试

    调试工具 cuda-gdb,网上有英文版的说明文档. 其中大部分调试命令和gdb的调试命令相同. cuda程序分为主机端程序和设备端程序,主机端程序调试也就是C语言程序的调试 主要是设备端程序,关键点 ...

  3. Java如何检查一个线程停止或没有？

    Java如何检查一个线程停止或没有? 解决方法 下面的示例演示如何使用 isAlive()方法检查一个线程是否停止. public class Main { public static void ma ...

  4. e779. 获得JList中的已选项

    The following methods return the indices of the selected items: // To create a list, see e774 创建JLis ...

  5. python_smtplib

    import smtplib smtpserver = 'smtp.qq.com' fromaddr = 'fromaddr@qq.com' toaddrs = 'toaddr@qq.com' msg ...

  6. HTTP之referer

    安全培训中提到可以通过referer判断安全性,hackbar中也有一个enable referer的选项,则,这个referer到底是个什么角色? (以下是搜集的一些资料整合,链接均放到底部,不再一 ...

  7. Http请求的工具

    1.火狐的插件 HttpRequester 安装方法:火狐浏览器的最右上角的菜单,打开附件组件 ,搜索:HttpRequester,重启火狐浏览器.在菜单栏的工具下可以看到 HttpRequester ...

  8. python实现原地刷新方式输出-可用于百分比进度显示输出

    方式1: import sys sys.stdout.write('\r' + '你的输出详情') sys.stdout.flush() 方式2: print('\r' + '你的输出详情', end ...

  9. Spring AOP的日志记录

    现在的项目是Spring+MyBatis,前段时间项目经理让我干了一个活,就是给所有的controller里的所有方法加上日志记录的代码,其实没有多少,也就300来个方法,也没有抱怨什么,一边打着瞌睡 ...

  10. eclipse中去掉validate的方法

    昨天在右击项目想选择refresh的时候一不小心选择了validate,就发现target包出现了红色的叉号.当时觉得反正项目运行没有什么异常,就这么凑合了一天半多. 后来,当我改jsp的时候从< ...