React-Router原理分析

React-Router原理分析

一、两种模式：hash和history

在HTML5 historyAPI出来前前端的路由都是通过hash（‘#’）来实现的,服务器不会解析路径中的‘#’，但是js可以通过window.location.hash读取到，当hash值发生改变时读取到hash值来匹配组件进行渲染。

history是HTML5新有的API，用来操作浏览器的session history(会话历史)，表现形式和原有的路径一样不用‘#’而是用‘/’。但这种方式需要服务器后端有路径所对应的印射文件。

二、React-Router

当URL发生改变时（会触发hashchange或history.popstate事件，改变URL），会调用history.pushState()方法，将路径状态压入栈（两种模式都会将新路由信息压入栈，只不过一个有‘#’一个没‘#’），同时得到location对象。接下来matchRoutes方法会匹配出Route组件树中与location对象所对应的组件，并得到nextState，最后顶用Router组件中的this.setState(nextState),渲染对应组件。

参考博文：
[1] https://juejin.cn/post/6886290490640039943#heading-28
[2] https://www.jianshu.com/p/7044952626bf