試著用React寫專案-利用react-router解決跳轉路由等問題(四)
阿新 • • 發佈:2019-02-10
不知不覺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程式碼的所以寫前端程式碼也是邊學邊寫,謝謝大家的支援了!