首先先看一下我的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. android学习中遇到的错误

    1.运行项目的时候报错: [2013-12-16 17:59:22 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowExcept ...

  2. 【转】【WPF】WPF - MVVM - 如何将ComboBox的Selectchange事件binding到ViewModel

    将所有的事件,属性,都映射到ViewModel中.好处多多,以后开发尽量用这种模式. 解决方法: 使用System.Windows.Interactivity.dll,添加该dll到项目引用 xmln ...

  3. Java如何显示一年的周数？

    在Java中,如何查找一年中或一个月中的第几个星期? 以下示例显示年份和月份的第几周. package com.yiibai; import java.util.*; public class Dis ...

  4. e831. 从JTabbedPane中删除一个卡片

    // To create a tabbed pane, see e828 创建JTabbedPane // Remove the last tab pane.remove(pane.getTabCou ...

  5. Linux系统源码安装软件过程中configure选项-prefix的作用

    在linux和unix环境中,源码安装是最常用的软件安装方式,一些软件出了提供源码外,也提供各种发行版的二进制安装包(如基于redhat包管理工具的rpm包),但强烈建议使用源码安装方式. 在linu ...

  6. Radix-64编码简介

    本文介绍Radix-64编码,PGP和S/MIME均使用了Radix-64编码技术,rfc4880的Chap 6有关于Radix-64的详细描述. Radix-64编码基于Base64编码技术,由两部 ...

  7. linq where in 排序

    List<INGREDIENT> selectedIngredients = db.INGREDIENT .Where(i => model.SelectedIngredients. ...

  8. C# Http访问帮助类，支持get post请求文件下载 [

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.I ...

  9. c/c++ 代码中使用sse指令集加速

    使用SSE指令,首先要了解这一类用于进行初始化加载数据以及将暂存器的数据保存到内存相关的指令, 我们知道,大多数SSE指令是使用的xmm0到xmm8的暂存器,那么使用之前,就需要将数据从内存加载到这些 ...

  10. 【转】Spring Boot干货系列：（三）启动原理解析

    前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开Sprin ...