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