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 列表，然后统一处理路由匹配逻辑

NavLink

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

路由守卫

常用场景比如路由鉴权

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

路由拦截

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