React-Route相关

官方教程

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
}

路由容器

未完待续

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React的学习资源 这个文章好久没有更新了,资源算比较老旧的了,毕竟前端更新还是非常快的。 半年不学习,都不知道...
    izhongxia阅读 23,491评论 11 629
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,642评论 2 45
  • React Native优秀博客,以及优秀的Github库列表(很多英文资料源自于[awesome-react-n...
    董董董董董董董董董大笨蛋阅读 10,858评论 4 162
  • 2017.6.23 星期五 阵雨 亲子日记(61) 今天如人们所愿终于下雨啦。儿子考试前最后的一个周末了。马上二...
    于泽妈妈阅读 174评论 0 2
  • 拾贝物语当我开始真正爱自己,我开始远离一切不健康的东西。不论是饮食和人物,还是事情和环境,我远离一切让我远离本真的...
    拾贝女一枚阅读 941评论 11 5