ReactRouter中的核心history库的详细分析

const history = {
 length, // 属性，history中记录的state的数量
 action, // 属性，当前导航的action类型
 location, // 属性，location对象，封装了pathname、search和hash等属性
 push, // 方法，导航到新的路由，并记录在history中
 replace, // 方法，替换掉当前记录在history中的路由信息
 go, // 方法，前进或后退n个记录
 goBack, // 方法，后退
 goForward, // 方法，前进
 canGo, // 方法，是否能前进或后退n个记录
 block, // 方法，跳转前让用户确定是否要跳转
 listen // 方法，订阅history变更事件
 };

const history = {
 length, // 属性，history中记录的state的数量
 state, // 属性，pushState和replaceState时传入的对象
 back, // 方法，后退
 forward, // 方法，前进
 go, // 方法，前进或后退n个记录
 pushState, // 方法，导航到新的路由，并记录在history中
 replaceState // 方法，替换掉当前记录在history中的路由信息
}

// 订阅history变更事件
window.onpopstate = function (event) {
 ...
}

// 构造hashHistory对象
const createHashHistory = (props = {}) => {
 ...
 const globalHistory = window.history; // 引用HTML5 history对象
 ...
 // transitionManager负责控制是否进行跳转，以及跳转后要通知到的订阅者，后面会详细讨论
 const transitionManager = createTransitionManager();
 ...
 // 注册history变更回调的订阅者
 const listen = listener => {
 const unlisten = transitionManager.appendListener(listener);
 checkDOMListeners(1);

 return () => {
 checkDOMListeners(-1);
 unlisten();
 };
 };
 
 // 监听hashchange事件
 const checkDOMListeners = delta => {
 listenerCount += delta;

 if (listenerCount === 1) {
 window.addEventListener(HashChangeEvent, handleHashChange);
 } else if (listenerCount === 0) {
 window.removeEventListener(HashChangeEvent, handleHashChange);
 }
 };
 
 // hashchange事件回调
 const handleHashChange = () => {
 ...
 // 构造内部使用的location对象，包含pathname、search和hash等属性
 const location = getDOMLocation(); 
 ...
 handlePop(location);
 };
 
 // 处理hash变更逻辑
 const handlePop = location => {
 ...
 const action = "POP";
 // 给用户展示确认跳转的信息（如果有的话），确认后通知订阅者。如果用户取消跳转，则回退到之前状态
 transitionManager.confirmTransitionTo(location, action, getUserConfirmation, ok => {
 if (ok) {
 setState({action, location}); // 确认后通知订阅者
 } else {
 revertPop(location); // 取消则回退到之前状态
 }
 });
 };
 
 // 更新action，location和length属性，并通知订阅者
 const setState = nextState => {
 Object.assign(history, nextState);

 history.length = globalHistory.length;

 transitionManager.notifyListeners(history.location, history.action);
 };
 ...
}