因為之前在做通配符跳轉的過程中寫了個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
新聞熱點
疑難解答
