官方教程
react-route官方教程非常完善,而且一步一步,通俗易懂,入门可以参看官方教程
https://github.com/reactjs/react-router-tutorial
进阶示例
https://github.com/ReactTraining/react-router
最简单的示例
render((
<Router history={browserHistory}> /*浏览器历史*/
<Route path="/" component={App}> /*渲染'/'下的组件为App*/
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>/*获取:userId作为地址*/
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.getElementById('root'))
可以用于跳转的a标签
/*跳转方法*/
goHome() {
this.context.router.push('/');//可以是任何路由
}
/*组件*/
render(
...
<a href="javascript:void(0)"
onClick={()=>this.goHome()} >gohome</a>
...
)
/*为组件添加propTypes属性以使用上述方法*/
TheComp.contextTypes = {
router: React.PropTypes.object.isRequired
}
路由容器
未完待续
