首先先看一下我的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中Cg的基本语法和使用

    Cg是类似于C语言的发展起来的图形编程语言,Cgraphics,它的很多表达式if...else...和C语言非常相像,也和C#非常相像. 由于Shader是写给显卡执行的,所以没有输出语句来调试,很 ...

  2. Solr系列六：solr搜索详解优化查询结果（分面搜索、搜索结果高亮、查询建议、折叠展开结果、结果分组、其他搜索特性介绍）

    一.分面搜索 1. 什么是分面搜索? 分面搜索:在搜索结果的基础上进行按指定维度的统计,以展示搜索结果的另一面信息.类似于SQL语句的group by 分面搜索的示例: http://localhos ...

  3. 获取Java正在执行的方法

    new Object(){}.getClass().getEnclosingMethod().getName(); Thread.currentThread().getStackTrace()

  4. mybatis plus 联合查询

    在xml中只需要需要写如下的代码即可实现分页: <select id="selectUserList" parameterType="map" resul ...

  5. 如何使用 OpenFileDialog 组件 (选择文件组件)

        向程序设计窗体中添加一个OpenFileDialog控件,在属性对话框中设置其Filter属性为 "所有文件(*.*)|*.*|文本文件(*.txt)|*.txt|WPS文档(*.w ...

  6. 贫血模型;DTO：数据传输对象（Data Transfer Object）;AutoMapper ;Domain Model（领域模型）;DDD（领域驱动设计）

    ====================== 我自己的理解 ========================== 一:  DTO  我自己的理解,就是 比如你有一个类,跟数据库的table表结构一模一 ...

  7. mothur reverse.seqs 将序列反向互补

    reverse.seqs 命令可以得到输入序列的反向互补序列 用法: mothur "#reverse.seqs(fasta = "input.fasta")" ...

  8. winform程序开机自动启动

    app.manifest <requestedExecutionLevel level="requireAdministrator" uiAccess="false ...

  9. C# 当前目录你了解多少

    C#中获取程序运行的当前目录的方法有多种,本文为大家提供三种方式,并作简单分析,有需要的朋友,可以参考下. 在C#中,有很多方式可以获取程序运行的当前目录,常见的方式有: .string strPat ...

  10. Linux中Subversion配置实例

    一.安装 yum install subversion 二.配置 本系统采用为每个项目单独建一版本库的策略.配置文件,密码文件,访问控制文件等都放在版本库的conf目录下. 所以每次开始一个新项目都必 ...