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),渲染对应组件。

参考博文:https://www.jianshu.com/p/7044952626bf

猜你喜欢

转载自blog.csdn.net/wdhxs/article/details/114373491