【React】react-router-dom中的HashRouter和BrowserRouter实现原理

1. 前言

        在之前整理BOM的五个对象时，提到：

• location.hash发生改变后，会触发hashchange事件，且history栈中会增加一条记录，但页面不会重新加载——实现HashRouter的关键
• history.pushState(state, '', URL)执行后，history栈中会增加一条记录，但页面不会重新加载，回退（history.back()或history.go(-1)）会触发popstate事件，location.pathname发生改变——实现BrowserRouter的关键

        本篇通过举例方式详细描述实现的过程。

2. HashRouter的原理

2.1 原理要点

• 通过元素href属性修改URL的hash值（或location.hash='#/xxx'修改，或前进后退修改）；
• location.hash发生改变，页面不会重新加载；
• location.hash发生改变，URL也会改变（hash是URL的一部分），新URL被推入history栈中；
• location.hash发生改变，会触发window的hashchange事件；
• 通过给window.onhashchange绑定事件处理函数，监听hash变化，根据hash值选择渲染的组件。

注：根据hash值变化渲染组件，不会影响hash原有作为锚点的功能（锚点功能：根据#后面字符串滚动到对应id的元素 ）

2.2 示例源码

    
        
        
    
    
        Go user
        Go info
        

        
        
    

3. BrowserRouter的原理

3.1 原理要点

• window不支持onpushstate事件，需要为window构造onpushstate事件，并绑定事件处理函数，重写history.pushState，保证执行history.pushState就会触发onpushstate事件；
• 可以为菜单项绑定click事件处理函数，执行重写的history.pushState(state,title,url)修改URL；
• 执行重写的history.pushState，页面不会重新加载，但location.pathname发生改变，并触发window的onpushstate事件；
• 通过window.onpushstate的事件处理函数，监听pathname变化，根据pathname值选择渲染的组件；
• 前进和后退会改变URL，页面不会重新加载，location.pathname发生改变，并触发window的onpopstate事件；
• 通过window.onpopstate绑定的事件处理函数，监听pathname变化，根据pathname值选择渲染的组件。

3.2 示例源码

4. 总结

        再牛的建筑都离不开一块一块砖瓦，学到很多高大上的框架和上层API时，再回过头来看基础，会更加深对框架和上层API的理解。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~