转载请注明出处：王亟亟的大牛之路
不知不觉Router部分的内容已经写到第四篇了，这一篇会再点一点histroy以及实现一个提交表单的例子
还是老规矩，先安利一下：https://github.com/ddwhan0123/Useful-Open-Source-Android （安卓的路由跳转部分拆了出来）
histroy
histroy 在之前也有提及但是没有深究，这次来提一下他的三个属性
browserHistory
hashHistory
createMemoryHistory
hashHistory：路由将通过URL的hash部分（#）切换，URL的形式类似http://localhost:8080/#/Three/haha
browserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径http://localhost:8080/Three/haha
createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动
以上内容来自：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
看上去createMemoryHistory很直白不用提，另外2个的最大的差异就在下面
browserHistory使用 History API 在浏览器中被创建用于处理 URL
hashHistory不需要在服务端配置，可以纯前端的控制路由的切换
搞清楚了之前没交代清楚的histroy，我们来实现今天的例子
Route处理表单
因为之前在做通配符跳转的过程中写了个Three.js，这次只要稍作修改就能用
官方的说明在https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating 英文好的可以直接看
首先是在render里加个表单
<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="name"/>{' '}
<button type="submit">Go</button>
</form>
官方给出了2种解决方案一个是browserHistory.push，还有个是context对象
例子选用的是 context对象 的方式完成跳转，完整如下
import React from 'react';
import styled from 'styled-components';
import NavLink from './../component/nav/NavLink';
const H2 = styled.h2`
color: #eee
`;
export default React.createClass({
contextTypes: {
router: React.PropTypes.object
},handleSubmit(event) {
event.preventDefault()
const name = event.target.elements[0].value
const path = `/Three/${name}`
this.context.router.push(path)
},render(){
return (
<div>
<h2>hi i am three</h2>
<ul>
<NavLink to="/Three/haha">haha</NavLink><br></br>
<NavLink to="/Three/heihei">heihei</NavLink><br></br>
<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="name"/>{' '}
<button type="submit">Go</button>
</form>
</ul>
{this.props.children}
</div>
)
}
})
我们来看下演示的效果
关于路由的就写到这里了，接下来学什么再想想吧。
