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 就可以更新对应的路由组件。
网友评论