history 源码分析- createHashHistory

首先讲讲 hashHistory 是什么。

众所周知，在单页应用中，我们常用的两种路由策略是 hashHistory 和 browserHistory。其中 browserHistory 是古老的路由方式，从网页诞生一直沿用到现在，比如掘金个人文章页面的地址 https://juejin.im/user/57a0c28979bc440054958498/posts。而 hashHistory 是单页应用（SPA）出来之后，被广为使用的一种路由方式，它使用 # 后面的路径作为页面标识，如 https://i.ai.mi.com/h5/ai-xiaoai-3-years-fe/#/home。前者让我们更难判断项目业务路径（xxx/static/yy-prj-name/home），而后者可以根据 # 后面的路径轻松判断。

history 项目信息：

• 项目地址：https://github.com/ReactTraining/history

• ReactTraining/history(react-router 同样出自 ReactTraining)

• history 是 react-router 的核心依赖

• rollup 打包

项目结构

项目核心代码在 modules 目录下，其中关键文件是 createBrowserHistory.js、createHashHistory.js、createMemoryHistory.js。

createHashHistory

createHashHistory.js 文件导出一个 createHashHistory 函数。

createHashHistory 用法如下：

// 下面给出的是默认值
createHashHistory({
  basename: '', // The base URL of the app (see below)
  hashType: 'slash', // The hash type to use (see below)
  getUserConfirmation: (message, callback) => callback(window.confirm(message))
});

• basename 是路由改变时默认会带上的一串字符串

• hashType 可以忽略，用默认的