转载请注明出处：王亟亟的大牛之路
继续本周的大方向，继续学习React，昨天把简单的hi all内容呈现出来后，今天研究如何多页面或者实现页面嵌套，
开始今天的内容前老规矩，先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android
在传统的静态网页里，我们页面跳转通过超级链，页面重定向，转发等等姿势来解决多页面展示和逻辑跳转，而React对这部分做了很好的封装，也做成了 主件。
要是用也是国际惯例，npm下！！
npm install -S react-router
下完后直接import就可以使用，像这样
import { Router, Route, hashHistory } from 'react-router';
Router是大壳子，类似于路由容器的东西
Route是具体实施路由的对象
hashHistory表示路由切换的hash值，决定最终结果
因为直接的项目结构比较建的随意，所以把目录进行了重新整理，把main.js变成一个大容器，不做任何业务主件使用，像这样。
这一部分 react官方的例子写的很详细很棒，大家也可以看https://github.com/reactjs/react-router-tutorial，或者把他的demo跑一跑 豁然开朗。
上面提到了router其实和使用常规主件一样倒入，使用即可最基本的也就是以下这种形式
<Router><<Router>
我们先来写一个简单的页面
首先是昨天的ui搬家到了新的first.js
import React from 'react';
import styled from 'styled-components';
import { Router, Route, hashHistory } from 'react-router';
const Input = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;
const H1 = styled.h1`
background-color: #a1a
`;
export default React.createClass({
render() {
return (
<div>
<Input placeholder="@mxstbr" type="text" />
<H1>i am first h1</H1>
</div>
);
}
})
然后在我们的main.js调用他
import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory } from 'react-router';
import first from './first';
render((
<Router history={hashHistory}>
<Route path="/" component={first}/>
</Router>
), document.getElementById('app'))
我们倒入了 first和react-router所用到的相关对象
Router容器下有一个Route节点会让我们的页面中多出first部分的内容
长这样
那我如果要路由到其他页面呢？
那我们来建一个页面来让他渲染
two.js
import React from 'react';
import styled from 'styled-components';
const H3= styled.h3`
background-color: #a11
`;
export default React.createClass({
render(){
return (
<H3>i am two h3</H3>
);
}
})
这是一个最基本的页面，就不解释了（建议手打，找找手感）
需要修改的知识main.js里的render部分
render((
<Router history={hashHistory}>
<Route path="/" component={first}></Route>
<Route path="/two" component={two}/>
</Router>
), document.getElementById('app'))
浏览器输入http://localhost:8080/#/two 看看效果吧
因为主件可以是单一控件，也可以是试图组，所以Router也是，它可以嵌套多个<route>
新建一个 three.js试试吧
import React from 'react';
import styled from 'styled-components';
const H2 = styled.h2`
color: #eee
`;
export default React.createClass({
render(){
return(
<H2>i am three H2</H2>
)
}
})
页面和two.js一样所以可以copy下。
我们强行让three嵌套入first
修改如下
render((
<Router history={hashHistory}>
<Route path="/" component={first}>
<Route path="/three" component={three}/>
</Route>
<Route path="/two" component={two}/>
</Router>
), document.getElementById('app'))
其实现在的内容就是
<first>
<three></three>
</first>
输入http://localhost:8080/#/three看看吧
这一篇简单的介绍下这一套姿势如何简单的使用，其实react大多数功能都是如此，封装的简单易用，下一篇还会讲 路由相关
周末愉快！！！
