Skip to main content

React Router

单页面应用的路由原理差不多，都是基于浏览器的 history API 管理历史浏览记录，通过监听 history 对象的变化（onpopstate） 或 hash 的变化（hashchange），抹平两者的差异，统一路由的对象（history）和操作函数

React Router 各组件​

Router​

分为 BrowserRouter 和 HashRouter，这两个组件在 react-router-dom 中，但它们都基于 react-router 的 Router 组件。他们会维护一个路由状态 state，一旦发生路由变化，就会触发重新渲染 Router 组件，重新执行路由匹配逻辑，达到切换路由页面的效果

Route​

这个组件只是挂载下真实的路由组件和路径信息等

Routes​

Routes 组件会遍历 Route 组件，形成一个 routes 列表，然后统一处理路由匹配逻辑

基于 Link 组件的加强版，Link 组件主要是对 a 标签的改造，会阻止 a 标签的默认跳转，以及加上路由跳转逻辑，这部分路由跳转逻辑会去修改 Router 组件的路由状态

路由守卫​

常用场景比如路由鉴权

思路：在路由组件包装一个权限路由组件，可能需要递归处理，参考 https://zhuanlan.zhihu.com/p/555189442

路由拦截​

比较多的场景是做跳转前确认

借助 useBlocker，参考 https://gist.github.com/chaance/2f3c14ec2351a175024f62fd6ba64aa6

路由懒加载​

基于 ES6 的 动态 import 特性，webpack 在打包时会识别该语法并将其打包成一个 chunk，接着结合 React.lazy() （lazyComponent）和 Suspense 实现懒加载路由组件，当路由被匹配时才会加载对应的组件，而不是一次性加载所有路由组件，从而减少页面加载时间和网络带宽的消耗

原理参考

参考​