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. POJ3694 Network —— 边双联通分量 + 缩点 + LCA + 并查集

    题目链接:https://vjudge.net/problem/POJ-3694 A network administrator manages a large network. The networ ...

  2. oracle中的sys用户(修改密码)/////Oracle删除表空间的同时删除数据文件 ///// Oracle中如何保证用户只有一个session登录

    oracle中的sys用户(修改密码) (2011-07-01 09:18:11) 转载▼ 标签: it 分类: oracle 概念: SYS用户是Oracle中权限最高的用户,而SYSTEM是一个用 ...

  3. I.MX6 bq27441 GPOUT interrupt

    /******************************************************************** * I.MX6 bq27441 GPOUT interrup ...

  4. [软件安装]MYSQL

    https://dev.mysql.com/downloads/repo/yum/ wget https://repo.mysql.com//mysql57-community-release-el7 ...

  5. poj 1815 Friendship【最小割】

    网络流的题总是出各种奇怪的错啊--没写过邻接表版的dinic,然后bfs扫到t点不直接return 1就会TTTTTLE-- 题目中的操作是"去掉人",很容易想到拆点,套路一般是( ...

  6. codeforces 880E. Maximum Subsequence(折半搜索+双指针)

    E. Maximum Subsequence time limit per test 1 second memory limit per test 256 megabytes input standa ...

  7. 数字货币期货与现货JavaScript量化策略代码详解汇总

    1.动态平衡策略 按照当前的 BTC 的价值,账户余额保留¥5000 现金和 0.1个 BTC,即现金和BTC 市值的初始比例是 1:1. 如果 BTC 的价格上涨至¥6000,即 BTC 市值大于账 ...

  8. windows环境安装和使用curl与ES交互

    一.下载安装 去官网下载对应版本的包,解压后打开CMD切换到对应目录(我的目录,E:\file\I386)下运行CURL.exe文件, 如果把该CURL.exe文件复制到C:\Windows\Syst ...

  9. C语言经典程序1

    //打印2-200的所有素数 (除了1和它本身,不能被小于它的其它数整除的数称为素数) ; ;i<;i++) //i遍历2-200 { ; //先默认这个数为素数 ;j<i-;j++) / ...

  10. codevs 3044 矩形面积求并 || hdu 1542

    这个线段树的作用其实是维护一组(1维 平面(?) 上的)线段覆盖的区域的总长度,支持加入/删除一条线段. 线段树只能维护整数下标,因此要离散化. 也可以理解为将每一条处理的线段分解为一些小线段,要求每 ...