首先先看一下我的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. Mac 系统上安装Lua和SubmlimeText 编译器

    第一步:安装命令 curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz tar zxf lua-5.2.3.tar.gz cd lua-5.2.3 ma ...

  2. 第三百二十七节,web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求

    第三百二十七节,web爬虫讲解2—urllib库爬虫 利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode(& ...

  3. Solr系列二:solr-部署详解(solr两种部署模式介绍、独立服务器模式详解、SolrCloud分布式集群模式详解)

    一.solr两种部署模式介绍 Standalone Server 独立服务器模式:适用于数据规模不大的场景 SolrCloud  分布式集群模式:适用于数据规模大,高可靠.高可用.高并发的场景 二.独 ...

  4. ZooKeeper系列

    Zookeeper系列(一) ZooKeeper系列(二) ZooKeeper系列(三) ZooKeeper系列(四)

  5. Python WSGI开发随笔

    本文记录学习WSGI时的一些知识点,值得后续学习中注意. wsgi应用接口只要是一个可调用的对象就行,这个可调用的对象需要: 1. 接受两个位置参数: a. 包含CGI形式变量的字典: b. 应用调用 ...

  6. ajax 把返回结果作为参数传递

    这个涉及到js的异步执行了,程序本身是同步执行的,到了getJSON这里的时候,这个函数是异步的,而 load_val这个函数是同步的,你需要这样来异步返回这个值 function load_val( ...

  7. tRNAscan-SE 预测tRNA基因

    tRNAscan-SE 软件可以根据输入的基因组序列,预测对应的tRNA的基因 在线的tRNAscan-SE的链接如下:http://lowelab.ucsc.edu/tRNAscan-SE/ 如下图 ...

  8. 作为一枚第二天上班的小小.net程序员(技术宅的那种)很迷茫哦,第一个随笔

    作为一枚第二天上班的小小.net程序员(技术宅的那种)很迷茫哦,第一个随笔

  9. PHP数组排序函数array_multisort()函数详解(二)

    array_multisort()这个函数可以对多个PHP数组进行排序,排序结果是所有的数组都按第一个数组的顺序进行排列 例如array_multisort($a,$b),$a,$b是两个数组,如果排 ...

  10. Spock集成入门

    本文基于SpringBoot 在pom.xml添加Spock依赖 <!-- test --> <dependency> <groupId>org.codehaus. ...