react基础（2）
react基础（1）：介绍了如何创建项目，总结了JSX、组件、样式、事件、state、props、refs、map循环，另外还讲了mock数据和ajax
还是用 react基础1 里创建的项目继续写案例。
react-router
在做单页面应用的时候就需要用到路由了。
首先来看一下我们的项目目录，如下所示：
package.json和webpack.config.js的内容和 react基础（1）一样的。
下面贴一下entries里的文件内容
react2/src/entries/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body> <div id="root"></div> <script src="common.js"></script>
<script src="index.js"></script> </body>
</html>
react2/src/entries/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render(){
return(
<div>123</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
安装依赖 npm i
启动本地服务 npm start
浏览器打开浏览效果 http://localhost:8989/
效果如下
案例1
react2/src/entries/index.js（其他几个文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';
class App extends Component {
render(){
return(
<div>
<ul>
<li><Link to="/movie">电影</Link></li>
<li><Link to="/tv">电视剧</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<ul>
<li>还珠格格</li>
<li>来自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<ul>
<li>暮光之城</li>
<li>喜剧之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App}>
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Route>
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
Router、Route、Link这三个大家可以看一下教程了解一下定义，这里不详细讲解：教程戳这里
关于history的教程戳这里。常用的History有三种：browserHistory、hashHistory、createMemoryHistory（从react-router引出）。在声明路由的时候需要指定所选的方式，没有默认选项。
使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis
使用browserHistory,浏览器的url是这样的：/user/liuna （大家可以自己试试这种，这里就不写案例了）
这个案例写出来的效果类似tab切换
案例2：
react2/src/entries/index.js（其他几个文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';
class App extends Component {
render(){
return(
<div>
<ul>
<li><Link to="/movie">电影</Link></li>
<li><Link to="/tv">电视剧</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>还珠格格</li>
<li>来自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>暮光之城</li>
<li>喜剧之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App} />
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
这个效果就相当于是直接跳转了页面，和案例1的tab切换效果不一样的主要代码，如下所示
案例1里面component为Tv和Movie的Route标签是写在component为App的Route标签里的，而案例2里相当于是同级的。
案例3
react2/src/entries/index.js（其他几个文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';
class App extends Component {
render(){
return(
<div>
<p>
<span><Link to="/movie">电影</Link></span>
<span><Link to="/tv">电视剧</Link></span>
</p>
{this.props.children}
</div>
)
}
}
class Home extends Component {
render(){
return(
<div>欢迎你！</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>还珠格格</li>
<li>来自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>暮光之城</li>
<li>喜剧之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Route>
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
从上面的效果图中，可以看到，有“欢迎你！”这个类似首页的东西。
IndexRoute默认路由，当path=“/”时，默认显示Home组件。IndexRoute也是从react-router里引出的。
ps
这篇还是react基础（1）写完以后的存货，好久没有更新了，先把这篇存货发了
react基础（2）的更多相关文章
- react基础（1）
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- react基础语法（五） state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- React 基础入门，基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- React 基础入门
React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...
- react基础
上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...
随机推荐
- Markdown 简单指北
Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Markdown 简介 Markdown是一种 ...
- quartus2中FPGA管脚分配保存方法（转）
一.摘要 将Quartus II中FPGA管脚的分配及保存方法做一个汇总. 二.管脚分配方法 FPGA 的管脚分配,除了在QII软件中,选择“Assignments ->Pin”标签(或者点击按 ...
- layer 弹出在 iframe内部弹出不居中是原因
parent.layer..confirm('您确定要删除这个模型吗?',{ shade: false, fixed: false, btn: ['确定', '取消'] //按钮 }, functio ...
- GCC和G++区别
原文:http://www.cnblogs.com/samewang/p/4774180.html 看的Linux公社的一篇文章,觉得不错,内容复制过来了. 其实在这之前,我一直以为gcc和g++是一 ...
- 安装python+setuptools+pip+nltk
环境:Win10 64 + python 2.7 32 bit Source installation (for 32-bit or 64-bit Windows) 1.Install Python: ...
- 6.28 Windows Serviece
描述: A 软件,已经注册了一个windows服务并启用,现在需要在服务自己的一个类B里增加一个字段,服务的作用是返回一个该类型B的实例 做法 增加字段,替换服务文件,重新注册服务并开启,但是在A软件 ...
- Jmeter之Bean shell学习(一)
一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...
- 垃圾收集器Serial 、Parallel、CMS、G1
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt378 这里介绍4个垃圾收集器,如果进行了错误的选择将会大大的影响程序的性能. ...
- JavaScript学习日志（二）：面向对象的程序设计
1,ECMAScript不像其他面向对象的语言那样有类的概念,它的对象与其他不同. 2,ECMAScript有两种属性:数据属性和访问器属性.([[]]这种双中括号表示属性为内部属性,外部不可直接访问 ...
- MPLS LDP随堂笔记2
前一天排错 Acl 1 匹配所有ospf的数据包 (目的 ospf建立邻居关系 传递路由条目) 2 放行UDP报文 让LDP邻居能互相收发HELLO包 4 放行TCP报文 让LDP邻居能够建立TCP会 ...