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 刷新页面