react-router3

利用H5的history.pushState(增加新的)和history.replaceState(替换当前的)操控历史栈

spa

优点
    - 体验好局部刷新
缺点
    - 浏览器前进后退会重新发送请求,没有好好利用缓存

哈希值

哈希值唯一不可逆
解决历史记录问题
    - #后面的字符串:片段标识符(hash url)
H5提供的两个API 
    - window.location.hash 
        - 取到#开始的字符串
        - 可以更改无需加#
    - window.onhashchange = func //回调监听hash改变

react-router

相关组件
    - Router 路由器组件,包含其他组件,总管家
        - history = {hashHistory} 监听浏览器地址栏变化,将url解析成一个地址对象
        - 子组件Route
    - Route 路由组件,注册路由
        - path="/xxx" //请求的地址
        - component={xxx}
    - IndexRoute 默认路由组件
    - hashHistory 路由的切换由url的hash变化
    - Link 路由链接组件,生成<a>
        - to="/xxx"
        - activeName="active"  //高亮状态的className
注册页  
<Router history={hashHistory}>
            <Route path="/" component={App}>
                <IndexRoute component={Home} />
                <Router path="/about" component={About} />
                <Router path="/repos" component={Repos}>
                    <Route path="/repos/:name/:repo" component={Repo} /> //子组件props.parmas.name可以查询到
                </Router>
            </Route>
        </Router>
使用页
//父组件可以通过rprops.children使用子组件
//link标签来使用

未完待续~~~

转载于:https://www.cnblogs.com/liqunblog/p/8961178.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值