【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 原理要点

通过<a>元素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 示例源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hash Router</title></head><body><a href="#/user">Go user</a><a href="#/info">Go info</a><div id="root"></div><!-- <div style="height: 600px;"></div><div id="/info"></div> --><script>let root = document.getElementById('root');window.onhashchange = function(event) {if(window.location.hash === '#/user') {root.innerHTML = `<label>用户名：<input value="小明" placeholder="user name"/></label>`;} else {root.innerHTML = `<label>年龄：13岁</label>`;}}</script></body>
</html>

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 示例源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hash Router</title></head><body><div id="root"></div><script>let root = document.getElementById('root');window.onpushstate = function(state, title, url) {console.dir({type: 'onpushstate', state, pathname: url});render(url);}// 修改history.pushState方法，将window.onpushstate事件绑入bindPushstate(window.history);function bindPushstate(history) {let pushState = history.pushState;history.pushState = function(state, title, url) {if(typeof window.onpushstate === 'function') {window.onpushstate(state, title, url);}return pushState.apply(history, arguments);}}            window.onpopstate = function(event) {const pathname = window.location.pathname;console.dir({type: event.type, state: event.state,pathname});render(pathname);}function render(pathname) {if(pathname === '/user') {root.innerHTML = `<label>用户名：<input value="小明" placeholder="user name"/></label>`;} else if(pathname === '/info') {root.innerHTML = `<label>年龄：13岁</label>`;} else {root.innerHTML = `<label>需要填写个人信息</label>`;}}setTimeout(() => {window.history.pushState({ page: 1 }, 'user', '/user');}, 2000);setTimeout(() => {window.history.pushState({ page: 2 }, 'info', '/info');}, 4000);setTimeout(() => {window.history.pushState({ page: 3 }, 'help', '/help');}, 6000);</script></body>
</html>