试着用React写项目-利用react-router解决跳转路由等问题（四）

转载请注明出处：王亟亟的大牛之路

不知不觉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>
    )
  }
})

我们来看下演示的效果

关于路由的就写到这里了，接下来学什么再想想吧。

我是个敲 android代码的所以写前端代码也是边学边写，谢谢大家的支持了！

源码地址：https://github.com/ddwhan0123/ReactDemo