import React, {Component} from 'react'
import {NavLink, Switch, Route, Redirect} from 'react-router-dom' import About from '../views/about'
import Home from '../views/home' export default class App extends Component { render () {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header">
<h2>React Router Demo</h2>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className="list-group-item" to='./about' activeClassName='activeClass'>About</NavLink>
<NavLink className="list-group-item" to='./home' activeClassName='activeClass'>Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Switch>
<Route path='/about' component={About} />
<Route path='/home' component={Home}/>
<Redirect to='/about'/>
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}

标红色的部分是路由路径错误,把点去掉就可以了,如下所示

              <NavLink className="list-group-item" to='/about' activeClassName='activeClass'>About</NavLink>
<NavLink className="list-group-item" to='/home' activeClassName='activeClass'>Home</NavLink>

react router activeclassName 没有显示的更多相关文章

  1. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  2. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  3. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  4. React Router教程

    React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...

  5. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  6. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  7. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  8. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  9. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

随机推荐

  1. Android ConstraintLayout详解

    1. 概述 在本篇文章中,你会学习到有关ConstraintLayout -- 一种构建于弹性Constraints(约束)系统的新型Android Layout.最终你将会在Android Stud ...

  2. java 防止表单重复提交(serlvet)

    java 防止表单重复提交 ---------FormServlet.java-------------- protected void doGet(HttpServletRequest reques ...

  3. 五.OC基础--1.多态,2.类对象,3.点语法,4.@property&@synthesize,5.动态类型,内省(判断对象是否遵循特定的协议,以及是否可以响应特定的消息)

    五.OC基础--1.多态, 1. 多态概念,定义:多态就是某一类事物的多种形态: 表现形式: Animal *ani = [Dog new]; 多态条件:1.有继承关系 2.有方法的重写 2.多态代码 ...

  4. 彻底解决SysFader:IEXPLORE.EXE应用程序错误

    彻底解决SysFader:IEXPLORE.EXE应用程序错误 转载于 西部e网(weste.net) 最近安装了IE8浏览器玩玩,但是发现一个严重的问题,就是在访问某些页面的时候,经常会出现“ysF ...

  5. word excel 等导出相关操作

    无插件,无com组件,利用EXCEL.WORD模板做数据导出(一) http://www.cnblogs.com/tzy080112/p/3413938.html 使用Aspose.Cells组件生成 ...

  6. Gym 100512F Funny Game (博弈+数论)

    题意:给两个数 n,m,让你把它们分成 全是1,每次操作只能分成几份相等的,求哪一个分的次数最多. 析:很明显,每次都除以最小的约数是最优的. 代码如下: #pragma comment(linker ...

  7. HDU-ACM“菜鸟先飞”冬训系列赛——第8场(1004)

    Problem D Time Limit : 3000/3000ms (Java/Other) Memory Limit : 65535/102400K (Java/Other) Problem De ...

  8. bzoj 2216: [Poi2011]Lightning Conductor【决策单调性dp+分治】

    参考:https://blog.csdn.net/clove_unique/article/details/57405845 死活不过样例看了题解才发现要用double.... \[ a_j \leq ...

  9. -------Pokemon Master------很水-------

    A - Pokemon Master Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Submit Sta ...

  10. dllMain函数

    Windows在加载DLL的时候,需要一个入口函数,就如同控制台或DOS程序需要main函数.Win32程序需要WinMain函数一样.一些例子中,DLL并没有提供DllMain函数,应用工程也能成功 ...