首先说明,这是一篇简单的说明性文章,没有review
React-router是实现React单页面开发(SinglePage Web Application)必不可少的工具。在扯React-router原理前,我们先来复习一下SPA(单页面应用)和MPA(多页面应用)的差别。
单页面不是指路由是完全静态的,而是比如像https://www.jianshu.com/writer#/notebooks/52151599/notes/这个网页,他的https://www.jianshu.com/这一部分是静态的,路由的切换全在最后的“/”后面。而多页面是每次切换路由都要发一个新的https://www.xxx.com/这样结构的新网页。
React-router的目的是实现URL与Ul的同步。其实现了路由的核心功能,而常用的React-router-dom是基于react-router,加入了在浏览器运行环境下的一些功能。react-router-native同理。
所以我们希望实现:不同URL——>不同页面——>不同组件。
如果使用原生的window.location.pathname,需要刷新页面,这就违背了单页面局部刷新的开发方法,所以采用js强大的history库:
使用window.history.pushState()既可以修改url,也不用刷新页面,同时通过 updateLocation,执行相应回调,最后重新render实现ui(component)的同步更新。
*Vue-router的原理类似