react-router

react-router

路由：保证url和视图同步

react-router是在react基础上建立起来的，

react渲染通过：props/state–>component–>ui;

react-router渲染通过：location–>route–>ui;

import { Router, Route, browserHistory } from 'react-router'

router，route是react组件，与其他前端的主要区别是route是组件

历史记录的管理

h5的history API:

- history.back()；浏览器返回键

- history.forward()；浏览器前进行为

- history.go(-1);从session历史导入特定页面

- history.pushState(state, title, url)；向历史记录栈顶添加一条记录(包括ajax)，存储state对象，只能入栈

- history.replaceState();更改当前的历史记录

- history.state;存储的state数据

前进或后退触发popstate事件，取出state对象

在 react-router 内部将该对象存储到了 sessionStorage，saveState 操作

也可使用地址栏location.hash值模拟

1. 使用hashchange事件监听window.location.hash变化

2. hash变化时浏览器更新url，并在history栈产生一条记录

3. 路由系统会将所有的路由信息都保存到 location.hash 中

4. react-router 内部注册hashchange

5. 通过判断currentLocation 与nextLocation 是否相同来决定是否调用transitonTo(location)跳转



react-router教程

github