30_react_router基本使用
项目结构:
import React from 'react' import {render} from 'react-dom' import {BrowserRouter} from 'react-router-dom' import App from './components/app' render( ( <BrowserRouter> <App/> </BrowserRouter> ), document.getElementById('root') )
index.jsx
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-8 col-xs-offset-2'> <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'>about</NavLink> <NavLink className='list-group-item' to='/home'>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='/home'/> </Switch> </div> </div> </div> </div> </div> ); } }
app.jsx
import React, {Component} from 'react' export default class About extends Component { render() { return ( <div> about route component </div> ) } }
about.jsx
import React, {Component} from 'react' export default class Home extends Component { render() { return ( <div> home route component </div> ) } }
home.jsx
30_react_router基本使用的更多相关文章
随机推荐
- python小知识——__name__ = '__main__' 的作用
很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...
- nginx配置socket服务
1.服务器环境:centos7.5 2.安装nginx 首先下载:wget http://nginx.org/download/nginx-1.14.0.tar.gz 解压:tar zxvf ngi ...
- ubuntu 安装 c语言的库函数man手册
安装 1.C语言库函数基本的帮助文档 sudo apt-get install manpages sudo apt-get install manpages-de sudo apt-get insta ...
- android用户信息保存
一.SharedPreferences key-value方式保存简单类型的数据.文件位置data/data/相应的包名/xml文件 保存 SharedPreferences preference = ...
- Vagrant 命令详解
1.查看当前登录的用户系统上所有活动的Vagrant环境的状态. vagrant global-status参数:--prune 清除列表中的无效条目 ... ...
- mission 01
A.自己目前在专业能力上的短板,及打算如何弥补. answer:由于在课本中所学的知识是死板的,加上不知如何课外提高自己在专业上的实践应用能力,所以我认为我在专业能力上的短板是缺乏将所掌握的知识应用到 ...
- 小妖精的完美游戏教室——人工智能,A*算法,引言
今天也要直播魔法,求科学的! 欢迎来到小妖精Balous的完美游戏教室! 经过前两周的学习,相信米娜桑已经对状态机有所了解了呢~虽然状态机能够实现几乎所有的人工智能,但是,在实践中,你们有没有发现,自 ...
- vc6.0使用
1.文件结构 工作空间dsw 工程1 Source file .cpp,main Header file .h Resource files 工程2 ...
- fromkeys()
#fromkeys() #说明:用于创建一个新字典,以序列seq中元素做字典的键,value为字典所有键对应的初始值 #案例 d=[1,2,3] dict={} dict=dict.fromkeys( ...
- ubuntu18关闭系统自动更新
ubuntu18.04关闭系统自动更新有两个方法:1.修改配置文件 修改配置文件/etc/apt/apt.conf.d/10periodic#0是关闭,1是开启,将所有值改为0vi etc/apt/a ...