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中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...
随机推荐
- WeQuant交易策略—KDJ
KDJ随机指标策略策略介绍KDJ指标又叫随机指标,是一种相当新颖.实用的技术分析指标,它起先用于期货市场的分析,后被广泛用于股市的中短期趋势分析,是期货和股票市场上最常用的技术分析工具.随机指标KDJ ...
- 设计一个程序能够将某一个目录下面的所有文件名打印出来---File类的使用
,设计一个程序能够将某一个目录下面的所有文件名打印出来 运用到的方法有:返回一个字符串数组,这些字符串指定此抽象路径名表示的目录中的文件和目录:list() 测试此抽象路径名表示的 ...
- Nodejs进阶：服务端字符编解码&乱码处理
写在前面 在web服务端开发中,字符的编解码几乎每天都要打交道.编解码一旦处理不当,就会出现令人头疼的乱码问题. 不少从事node服务端开发的同学,由于对字符编码码相关知识了解不足,遇到问题时,经常会 ...
- 算法学习：Pac-Man的简单对抗
Pacman项目是加州大学伯克利分校提供的一个可视化的AI学习平台.其主体利用python完成.该项目提供了丰富的说明文档,以及预先实现了一些简单的算法供参考各接口的使用. http://ai.ber ...
- Java设计模式之-------->"代理模式"
01.什么是代理模式? 解析:代理(Proxy):代理模式的主要作用是为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不想或者不能直接引用另一个对象, 而代理对象可以在客户端和目标 ...
- Linux运维:安装CentOS7.2-图解
矮哥linux运维群: 93324526 笔者QQ:578843228 此篇博文针对最小化安装,和只有图解.有不懂地方,欢迎加群询问.
- JAVA基础第十组（5道题）
46.[程序46] 题目:两个字符串连接程序 package com.niit.homework1; import java.util.Scanner; /** * @author: Annie * ...
- 201521123093 java 第七周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 //contains()方法 public boolean contains ...
- 201521123048《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...
- 201521123045-----《Java程序设计》第3周学习总结
---恢复内容开始--- 1. 本章学习总结 2. 书面作业 1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private stati ...