React-router

原理：react-router 是依赖于第三方js库history。而我们平时输在浏览器的URL则被history转换为location对象，
然后react-router的Router 组件会在componentWillMount 生命周期中就调用了history.listen方法，从而达到当路由变化， 会去调用setState 方法，修改location。然后通过context传递给组件，Route组件内部就匹配传下来的nextContext，从而去渲染对应的路由组件。

常用的history有三种

• createHashHistory
• createBrowserHistory
• createMemoryHistory

createHashHistory使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path的路由。没有相应的方法去替换历史记录的功能，并且并不知道 hash 部分的细节

createBrowserHistory使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。并且浏览器提供相应的接口来修改浏览器的历史记录，若服务端支持History API ，这样服务端能获取请求细节。

题外话： 单页面应用时候如果用的是createBrowserHistory的话，那么需要服务端做404处理，指向index.html。或者尝试nginx有一个配置try-file 指向index。而hash就不会出现404，因为永远都是根路径。

我们主要看下history怎么对路由变化监听的 只针对createBrowserHistory
参考掘金大神 https://juejin.im/post/5d4a68f5e51d4561ae4da5c6
重点

[图片上传中...(image.png-6378c9-1586852577090-0)]

image.png

image.png

从上面看出件监听的回调函数handlePopState ,其最终是通过setState 来触发路由监听者，其中notifyListeners 会调用所有的listen 的回调函数，从而达到通知监听路由变化的监听者。

react-router使用
就不一一赘述

路由器组件(、)
路由匹配组件(、)
导航组件(、、)。