dva 配置 browserHistory 实践总结

一、什么是 History

1. 概述

history 是历史记录管理。点击 a 标签跳转或者点击浏览器后退按钮，总之页面进行跳转时，history 都会记录这一步操作，方便后面 go、back 等操作。

三种 history：

hashHistory 老版本浏览器的 history。

browserHistory h5的history。现在的 web 项目都使用这种。

memoryHistory node环境下的 history，存储在 memory中。

2. 如何辨别 history 属于哪一种？

浏览器地址看地址url，如果有 #，那么就是 hashHistory了；

在代码中 'pushState' in window.history 如果为 true 说明是 browserHistory。

这是因为 browserHistory API 有 pushState, replaceState, popState。保持 ui（页面） 和 url（浏览器地址栏地址） 同步。地址栏地址变化，页面也同步变化。

3. browserHistory 为什么会出现，相对 hashHistory 有什么进步？

hashHistory 连续点击同一个链接会报错

使用 hashHistory，连续点击一个链接会报错：Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
but 使用 browserHistory 就不会出现这种情况。连续点击一个链接，第二次依然会有反应，但不会报错。

产生这种差异的原因是机制问题，hashHistory 制作一个栈来存放历史记录，且不允许连续两个历史记录相同。browserHistory 就允许连续两次历史记录相同。

测试：连续点击一个链接四次，再点击浏览器的后退按钮，看
hashHistory 与 browserHistory 的差别。

还有一个差异：hashHistory 不能很好的支持 basename。

4. 如何查看 history 中历史记录。

直接查看具体的历史记录只能到浏览器-选项-历史记录中查看。
通过代码的形式查看 window.history 打印出对象有个 length 属性，记录历史记录的条数。点击一条链接之后再打印 window.history 可以查看变化。

补充：浏览器中一个选项卡会单独记录它的历史记录，关闭浏览器选项卡重新打开之后又会从 1 开始计数。

二、dva 中如何使用 History

dva 官方文档提供的 api 可自由选择使用哪种 history，但是测试时貌似不行，只能使用 hashHistory，这个 bug 截止 2.0.3 版本还未修复。

import { browserHistory } from 'dva/router';
const app = dva({
history: browserHistory,
});

【替代方法】使用

history

这个第三方库。

安装

$ npm install history

修改 index.js 文件

import { createBrowserHistory as createHistory } from 'history';

const app = dva({
history: createHistory()
});

通过以上配置就已经使用了 browserHistory 了，如果这里没有感官认识，可以换成 hashHistory 刷新页面观察浏览器地址栏变化。

创建 hashHistory：

import { createHashHistory as createHistory } from 'history';

创建 memoryHistory：

import { createMemoryHistory as createHistory } from 'history';