react router activeclassName 没有显示
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 没有显示的更多相关文章
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...
- React Router学习笔记(转自阮一峰老师博客)
React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...
随机推荐
- HDU3829 Cat VS Dog —— 最大独立集
题目链接:https://vjudge.net/problem/HDU-3829 Cat VS Dog Time Limit: 2000/1000 MS (Java/Others) Memory ...
- POI中HSSF和XSSF操作Excel
POI中HSSF和XSSF操作Excel 在公司实习快一个月了,这段时间公司业务要用JAVA操作复杂的Excel报表.刚开始的Excel还好,没有涉及到复杂的图表,所以使用JXL操作Excel,但 ...
- Easier SQL with Cupboard
Overview Cupboard is a way to manage persistence in a sqlite instance for your app. It was written b ...
- C++ 多线程与并发
1. 非原子操作 这些非原子操作在被编译为汇编代码后不止一条指令. 自加.自减少: new 关键字: 申请内存: 调用构造函数: pInst = new T; // 对于这样一个赋值语句,更是包含了如 ...
- Servlet单例非安全解析
Servlet容器默认是采用单实例多线程的方式处理多个请求 Servlet容器<Web容器<应用服务器?apache<tomcat<websphere Servlet不是线程安 ...
- 创建oracle数据库job服务
创建oracle数据库job服务:PlSqlDev操作job https://www.baidu.com/link?url=5vXhw0IqjvWEAgGSIYsSEVPvJb6njGkJ-_P_VF ...
- BZOJ_3881_[Coci2015]Divljak_AC自动机+dfs序+树状数组
BZOJ_3881_[Coci2015]Divljak_AC自动机+dfs序+树状数组 Description Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是 ...
- CodeForces 723C Polycarp at the Radio (题意题+暴力)
题意:给定 n 个数,让把某一些变成 1-m之间的数,要改变最少,使得1-m中每个数中出现次数最少的尽量大. 析:这个题差不多读了一个小时吧,实在看不懂什么意思,其实并不难,直接暴力就好,n m不大. ...
- PHP tripos()函数使用需要注意的问题
tripos() 函数返回字符串在另一个字符串中第一次出现的位置.这在PHP字符串匹配与替换的时候常用到,但是很多时候我们总感觉当查找的字符串在源字符串的开头的时候总会不好使. 原来stripos() ...
- bzoj 4784: [Zjoi2017]仙人掌【tarjan+树形dp】
其实挺简单的但是没想出来---- 首先判断无解情况,即,一开始的图就不是仙人掌,使用tarjan判断如果一个点dfs下去有超过一个点比他早,则说明存在非简单环. 然后考虑dp,显然原图中已经属于某个简 ...