1.一文读懂 react-router 原理
一文读懂 react-router 原理
react-router是源码react生态系统中关键的一部分，它帮助我们管理URL以及实现页面组件间的源码切换。本文将深入react-router源码，源码探究其工作原理。源码
在开发中，源码我们通常不会直接使用react-router的源码产品展示 php源码核心API，而是源码从react-router-dom中导出所有API和组件。此外，源码还有我们不直接接触的源码history库，它们共同构成了完整的源码router功能，它们之间的源码关系如下：
这就是三个关键模块间的关系。
react-router：基于Context的源码全局状态下发
router是一个“Provider-Consumer”模型，你在最外层提供一个Provider，源码在内部任意位置都可以用Consumer接到数据。源码显然，源码上课签到源码这里使用了React.Context。
这里下发了两个Context：RouterContext、HistoryContext，都是隔壁模块导入的单例，所以一个项目中只能用一套react-router。那这两个有什么不同？各自下发了哪些状态？
RouterContext
RouterContext下发一个对象，主要包含三个信息：
其中，金蝶sql源码history来自history库提供的统一API，包括history的读取、操作、订阅等。
location来自Router的一个状态，Router会在mount的时候监听history，并在改变时更新location：
match用来描述当前Route对URL的源码编译系统匹配信息。Router来自Class的静态方法，写死了根路由的信息。
HistoryContext
HistoryContext更简单，直接下发了history：value={ this.props.history}。但是HistoryContext为什么要单独给呢？
总结下来，Router的结构如下：
：路由递归
Route用来匹配路由，特性如下：
根据当前路由匹配规则渲染对应组件
首先Route要判断自己是confirm的源码否匹配：
Route嵌套的实现
为了实现Route套Route，Route每次渲染都会重建一个RouterContext.Provider，把值更新为当前Route下计算后的router信息。
总结如下：
matchPath方法细节
最后打开matchPath方法看细节：
组件取值
组件可能需要哪些值？
可能通过哪些方式拿到？
消费Context的方式显然更通用，因此react-router的消费实现大多用这种方式。
withRouter()
在没hook前，withRouter是我们取route信息的主要方式。它是个简单的HOC：
hooks
有hook后，react-router提供了几个hook，也都是基于useContext来做的。
其他路由组件
react-router还提供了一些其他组件来丰富调用方式，举个的例子看看。
react-router-dom组件： 和
只是在用不同的history调：
history接口
主要几个信息：
实现思路
如图：
模块划分：
主要调用逻辑：
createBrowserHistory和createHashHistory的差异
两个方法向外暴露的接口完全一样，为了抹平差异，实现上做了如下两点适配：
1、location属性计算
createBrowserHistory下，location中的pathname, search, hash直接来自于window.location。
createHashHistory下则都是从#后的hash中解析出来的，比如hash部分是#/a/b?c=1#/d，解析出{ hash: '#/d', search: '?c=1', pathname: '/a/b'}。
2、event listener事件监听
createBrowserHistory只需监听popstate，而createHashHistory还要监听hashchange，而且这里要判断下前后location是否相等，因为hashchange可能是无效的。
小结