React router 浅析

路由地址实现原理

单页面应用路由实现原理是，切换url，监听url变化，从而渲染不同的页面组件。 主要的方式有history模式和hash模式。

history模式原理

改变路由

history.pushState

history.pushState(state, title, path)

1. state：一个与指定网址相关的状态对象， popstate 事件触发时，该对象会传入回调函数。如果不需要可填 null。
2. title：新页面的标题，但是所有浏览器目前都忽略这个值，可填 null。
3. path：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个地址。

history.replaceState

history.replaceState(state, title, path)

参数和pushState一样，这个方法会修改当前的 history 对象记录， history.length 的长度不会改变。

监听路由

popstate事件

window.addEventListener('popstate',function(e){
    /* 监听改变 */
})

同一个文档的 history 对象出现变化时，就会触发 popstate 事件  history.pushState 可以使浏览器地址改变，但是无需刷新页面。注意的是：用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 popstate 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮或者调用 history.back()、history.forward()、history.go()方法。

hash模式原理

改变路由

window.location.hash

通过window.location.hash 属性获取和设置 hash 值。

监听路由

onhashchange

window.addEventListener('hashchange',function(e){
    /* 监听改变 */
})