react-router 实现分析

react-router 模式概览

• hash (地址栏 # 做锚点，监听锚点后面地址的改变)
• history (利用 HTML5 的 history API)
• abstract (node环境下)

Hash 模式

通过监听 window.location 的变化来渲染对应组件

如何监听到 window.location 的变化呢？可以通过 window.onhashchange 去监听, 例如：

window.onhashchange = function(e) {
  console.log(e);
}

可以看到 # 锚点后面的部分改变了之后触发了这个onchangehash事件

hash 的变化都能被浏览器监听到，进而实现路由改变时渲染对应的组件

history 模式

使用 history 模式就能把你们都很排斥觉得很丑的 # 去掉。

不过，代价就是每次 url 的变更都会去请求服务器资源，原因就是因为浏览器认为 url 地址改变了需要去请求对应的资源，如果这个时候服务器没有进行相应的配置（即，url下没有对应的静态资源，则会直接返回 404，一般单页面项目，服务器配置都是统一返回同一静态资源，也就是打包后的 index.html）

history 模式是如何监听 url 改变的呢？

得益于 history API，现在浏览器也可以在改变地址栏的时候不进行页面刷新，从而达到只刷新对应路由组件的效果。

既然是 API 那它肯定有一些暴露的方法供我们使用：

控制台打印的 history 对象

属性：

• length ：返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。
• state: 返回一个表示历史堆栈顶部的状态的值。这个属性是通过history的方法设置的。 方法：
• go(param: number): 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时没有效果也不会报错。
• back(): 在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注：←)按钮模拟此方法. 等价于 history.go(-1)。
• forward(): 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进(译者注：→)按钮模拟此方法. 等价于 history.go(1).

同样的 back() 和 forward() 即使历史记录栈中不满足它们的操作，不会报错也不会有效果

• pushState(): 顾名思义，push 一条新的记录到历史记录栈最顶端。参数可以写入 state 和新的 url
• replaceState(): 直接将历史记录栈最顶端的记录（也可以理解为当前页面）替换。参数可以写入 state 和新的 url

这些方法能够自动处理浏览器访问记录，然后 react-router 只需要监听对应的 location.pathname 就可以更新对应的路由组件。