深入理解React Router:从原理到实践
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.4.2 history导航

1.history.push

与browserHistory一样,其签名为:

对于memoryHistory,其location存储在内存中,在调用history.push后,得到的location既可通过memoryHistory.location获取,也可通过访问历史栈获取:

与browserHistory、hashHistory一样,memoryHistory不仅支持调用block阻止跳转,还支持相对路径导航、保存state等:

注意,在memoryHistory导航过程中,所有信息都将保存到location中,不像browserHistory的key与state一样存在于window.history.state中进行持久化存储,memoryHistory导航过程中所有的key与state均存储在自身维护的内存中。

对于history.push的实现,其模拟了浏览器管理历史记录的方法:

2.history.replace

history.replace可替换历史栈内容,与browserHistory、hashHistory等均一致,其签名如下:

history.replace不增加栈记录:

对于history.replace,其内部实现非常简单,使用新的location替换历史栈中对应位置的历史记录即可:

3.history.go

memoryHistory的go方法与browserHistory、hashHistory的go方法一样,都是移动栈指针,不改变栈的内容;但其在实现上与这两者不同的是,browserHistory和hashHistory历史栈的栈指针由浏览器管理,而memoryHistory没有history.go方法可供调用以移动栈指针,所以memoryHistory自行维护栈指针,即便调用history.go方法也应自行控制栈指针。

history.go方法对跳转距离n做了钳位控制:

n被限制在0与history.entries.length-1之间。