React-Router 源码分析

本文通过实现一个最简路由来看 React Router 的源码实现，由浅入深，一步步领略路由之美。

1、单页面应用的路由基本原理

demo1

router1.html

以 hash 形式为例。

1、init 监听浏览器 url hash 更新事件。

2、route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新。

3、refresh 执行当前url对应的回调函数，更新页面

当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。

History API 可以实现 path 形式

demo2

router2.html

react-router 是基于 history 模块提供的 api 进行开发的。

这个例子来简单模拟下 react-router 的模式。

Router 通过对 history 进行包装开发，针对 historyModule 的机制对 Router 也起到了作用，即historyModule.updateLocation() 将触发 Router.listen 中的回调函数

2、react-router 部分源码探索与实践

react-router 中 Router 部分源码

Router 在这里对 history 进行了一个监听，正常调用了 history 以后，这边就会接收到这个更新，回调函数将在 url 更新时触发， 并且触发一次setState，触发页面刷新

Route 部分源码

props.match为true 就会渲染出组件

mathPath 部分源码

dva-router——react-router-dom/ react-router-redux

应用

ConnectedRouter 为 react-router-redux 内的对象 ConnectedRouter 的标签

dva 的 router.js

dva 的 package.json

react-router-dom

Router / BrowserRouter / HashRouter / MemoryRouter / StaticRouter

BrowserRouter

HashRouter

MemoryRouter

<MemoryRouter> 组件在内存中保存“URL”信息，不会修改浏览器的地址栏，往往用于React Native 等非浏览器环境。

StaticRouter

<StaticRouter> 组件 不修改路由，这在服务器端渲染时很有用。

Route

Redirect

Switch

Link

react-router-redux

react-router-redux 是 React-Router 与 Redux 的深度集成，它将路由完全纳入 store 中进行管理，使 store 成为了 URL（或者说是 history）的数据来源，也使我们能够通过 dispatch action 的方式来修改 URL

ConnectedRouter

dispatch 就相当于调用了 history 的 push replace 等方法。当发起了一个dispatch并且正常调用了history以后，Router 就会接收到这个更新，并且触发一次setState 刷新页面