不知不覺Router部分的內容已經寫到第四篇了，這一篇會再點一點histroy以及實現一個提交表單的例子

histroy

histroy 在之前也有提及但是沒有深究，這次來提一下他的三個屬性

browserHistory

hashHistory

createMemoryHistory

createMemoryHistory主要用於伺服器渲染。它建立一個記憶體中的history物件，不與瀏覽器URL互動

看上去createMemoryHistory很直白不用提，另外2個的最大的差異就在下面

browserHistory使用 History API 在瀏覽器中被建立用於處理 URL

hashHistory不需要在服務端配置，可以純前端的控制路由的切換

搞清楚了之前沒交代清楚的histroy，我們來實現今天的例子

Route處理表單

因為之前在做萬用字元跳轉的過程中寫了個Three.js，這次只要稍作修改就能用

首先是在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程式碼的所以寫前端程式碼也是邊學邊寫，謝謝大家的支援了！