react-router3

Posted 2021-01-13 liqunblog

利用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