react-router v3学习笔记

最近接手了一个简单的项目,需要修改一些逻辑,时间也比较充裕,正好适合我这个小白边学边做。其中涉及了一些知识点,包括redux和router。所以今天先开始学习阮一峰大神的react router教程
看完这篇文章之后才知道react-router v4和v3有很大区别。在v4里面主要引用react-router-dom获得组件。

一、基本用法:

import {
    Router, Route, hashHistory } from 'react-router';

render((
  <Router history={
   hashHistory}>
    <Route path="/" component={
   App}/>
    <Route path="/repos" component={
   Repos}/>
  	<Route path="/about" component={
   About}/>
  </Router>
), document.getElementById('app'));

以上代码用户访问http://www.example.com/,实际会看到的是http://www.example.com/#/,访问的是App组件;用户访问/repos(比如http://localhost:8080/#/repos)时,加载Repos组件;访问/about(http://localhost:8080/#/about)时,加载About组件。

hashHistory 是一种路由的类型,但是有#,一般大家都不倾向于用这个。

二、嵌套路由

<Router history={
   hashHistory}>
  <Route path="/" component={
   App}>
    <Route path="/repos" component={
   Repos}/>
    <Route path=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值