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 这个第三方库。

  1. 安装

    $ npm install history
    
  2. 修改 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';

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 89,289评论 13 124
  • 一、概述 dva 升级到 2.0 版本以后,也将内部使用的 dva/router 从 react-router@3...
    dkvirus阅读 26,379评论 1 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 139,899评论 20 593
  • 这半辈子颠簸 像一把杂乱的种子 随波逐流的撒了一把在这江南的角落 但我深知只是过客 是发不了芽的 过年本是归家的喜...
    栎枫城阅读 103评论 0 0
  • 大学生痛点调查也就是找出大学生的关键问题。这一步的调查,我们选择了面对面问卷采访,为什么不选择网络问卷呢?在这里我...
    迷之感动阿里嘎多阅读 375评论 0 0