React@16.x（45）路由v5.x（10）源码（2）- history

目录

• 1，作用
• • 1.1，createBrowserHistory
  • 1.2，createHashHistory
  • 1.3，createMemoryHistory
• 2，history 对象的属性
• • 2.1，action
  • 2.2，push / replace / go / goBack / goForward
  • 2.3，location
  • 2.4，listen
  • 2.5，block / getUserConfirmation
  • 2.5，createHref

1，作用

react-router 在控制和监听地址变化时，使用的是第3方库 history，其中，

• react-router v5.x，使用的 history v4.x版本
• react-router v6.0.0，使用的 history v5.0版本

所以下面介绍的是 history v4.10.1 的 API，和 v5.0 是有差异的，注意区分。

另外，该对象不是 window.history，而是一个抽离的对象，它提供统一的 API 接口，封装了具体的实现。

• createBrowserHistory，创建控制 浏览器真实地址 的history对象；
• createHashHistory 创建控制 浏览器 hash 的history对象；
• createMemoryHistory 创建控制 内存中地址栈 的history对象（一般用于没有地址栏的环境，比如 APP 中）。

它们3个共同的特点：

• 维护了一个地址栈；
• 返回的 history 对象结构完全一致。

v5 版本，在使用下面3个方法时，已经没有配置项了。

1.1，createBrowserHistory

配置项：

• basename：设置根路径。
• forceRefresh：地址改变时是否强制刷新页面。
• keyLength：location对象使用的 key 值长度。
  • 地址栈中记录的并非字符串，而是一个 location 对象。
• getUserConfirmation：一个函数，该函数当调用 history.block()后，发生页面跳转时运行。

1.2，createHashHistory

配置项：

• hashType：#号后给定的路径格式（注意 # 后的内容）
  • hashbang：被chrome弃用，#!路径
  • noslash：#a/b/c
  • slash：#/a/b/c

1.3，createMemoryHistory

略。

2，history 对象的属性

官方API介绍

2.1，action

当前地址栈，最后一次操作的类型。（该属性没什么用）

• 如果是通过 createXXXHistory 函数新创建的 history 对象，action 固定为 POP。
• 如果调用了 history.push()，action 变为 PUSH；同理调用 history.replace()，会变为 REPLACE。
• 其他的 go，goForward 等方法，不会改变 action。

只要是新创建的 history，action 都是 POP。
比如通过已创建的 history 执行了 push 操作，action 变为 PUSH。此时再次创建新的 history 对象，action 又会变为 POP。

2.2，push / replace / go / goBack / goForward

这些顾名思义，不多赘述。

2.3，location

表示当前地址中的信息，包括的属性（和 react-router 中的一样）：

{
    "pathname": "/",
    "search": "",
    "hash": "",
    "state": null,
    "key": "xfadfd"
}

key 属性，是为了区分2个相同的地址。因为在地址栈中，存储的是 location 对象，通过 key 做唯一性判断。

2.4，listen

在之前的文章 React 路由守卫 中已经介绍了使用方式。
是 react-router 实现无刷新跳转的关键。

用于监听地址栈指针的变化。该函数接收一个函数作为参数，该参数表示地址变化后要做的事情

参数函数接收两个参数：

• location：记录了新的地址信息；
• action：进入新地址的方式：
  • POP：调用 go、goBack、goForward、用户点击浏览器后退按钮。
  • PUSH / REPLACE

该函数有一个返回值，返回的是一个函数，用于取消监听。

2.5，block / getUserConfirmation

同样的，在之前的文章 React 路由守卫 中已经介绍了使用方式。

block 用于设置一个阻塞，当页面发生跳转时，会将指定的消息传递到getUserConfirmation，并调用 getUserConfirmation 函数。

• block 函数接收一个字符串作为参数，表示消息内容。也可以接收一个函数作为参数，函数的返回值是消息内容。
  该函数返回一个取消函数，调用取消函数可以解除阻塞。

2.5，createHref

返回一个可以直接作为 <a href=""> 的字符串，其实就是 bashname + url。

const href= history.createHref(location);

以上。