参考：https://juejin.cn/post/7127143415879303204

react中路由模式分为hash路由和history路由。hash路由的原理是window.onhashchange监听，url前面会有一个#号，这个就是锚点，每个路由前面都会有#锚点，特点是#之后的数据改变不会发起请求，因此改变hash不会重新加载页面。history路由的原理是window.history API，在HTML5中新增了pushState和replaceState方法，这两个方法是在浏览器的历史记录栈上做文章，提供了对历史记录做修改的功能，虽然更改了url但是不会向服务器发起请求。history模式虽然去掉了hash模式的#锚点，但是它怕刷新，因为刷新时是真实的请求。而hash模式下，修改的是#锚点之后的信息，浏览器不会将#锚点之后的数据发送到服务器，所以没有问题。

1、hash模式：原理是onhashchange事件，url都会被浏览器记录下来，只能改变#后面的url片段

2、history模式：根据history api中的pushState,replaceState两个方法。
浏览器本身会自带一个popstate事件，但是只有在我们点击返回或前进按钮时才会正常触发。

在线工具：https://codesandbox.io/s/shou-xie-hashlu-you-shi-xian-forked-9cib5m?file=/index.html:0-2240

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面

<script type="text/javascript">
	window.onhashchange = function(event){
		console.log(event.oldURL, event.newURL);
		let hash = location.hash.slice(1);
		document.body.style.color = hash;
	}
 
	
	window.history.pushState({color:'red'}, 'red', '');
	 
	window.onpopstate = function(event){
		console.log(event.state);
		if(event.state && event.state.color === 'red'){
			document.body.style.color = 'red';
		}
	}

    </script>