首先先看一下我的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. 关于VS2008和VS2013中字体的选择

    我这学期上ASP.NET的课,用C#语言,配合VS2008.自己课余在研究手机游戏的开发,用的是C++语言,配合VS2013.这两种开发环境我自己试过好多字体,后来感觉适合我自己的应该是以下这两种: ...

  2. Java如何比较两个数组？

    在Java中,如何比较两个数组? 示例 以下示例使用equals方法来检查两个数组是否相等. package com.yiibai; import java.util.*; public class ...

  3. Newtonsoft.Json 序列化小写首字母

    //json对象命名小驼峰式转换var json = JsonConvert.SerializeObject(newAccount, Formatting.Indented, new JsonSeri ...

  4. eclipse debug 执行到断点处并没有停下，断点无效问题

    转自:http://blog.csdn.net/cuidiwhere/article/details/14434439 现象: 利用eclipse debug时,执行到断点处并没有停下.正常情况下,在 ...

  5. ssh命令详解3

    SSH 的详细使用方法如下: ssh [-l login_name] [hostname | user@hostname] [command] ssh [-afgknqtvxCPX246] [-c b ...

  6. vegan 包进行 Bioenv 分析

    Bioenv 分析通过 计算样本群落结构的距离矩阵和 环境因子的距离矩阵,计算两个距离之间的相关系数,挑选出最佳的环境因子组合: 默认情况下,计算 群落结构的距离矩阵时, 使用 Bray-Curtis ...

  7. utf16编码格式

    UTF-16是Unicode字符集的一种转换方式,即把Unicode的码位转换为16比特长的码元串行,以用于数据存储或传递.UTF-16编码规则如下: 2.2.1 从U+D800到U+DFFF的码位( ...

  8. objelement = event.target || event.srcElement;

    objelement = event.target || event.srcElement; function updateProductVideo(e){ e = window.event || a ...

  9. EventBus的思路和一些反思

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws   C#本地实现的和Redis Set实现的,实际上都是要维护一个Events和Handle ...

  10. CSDN极客头条使用指南

    CSDN极客头条使用指南 今天给大家介绍一下CSDN博客最新推出的这个栏目--CSDN极客头条. 极客头条是什么 极客头条大家分享优质IT资源的聚集地. 大家不仅能够分享CSDN的文章,更能够将其它社 ...