10.React路由与项目实践 | 青训营笔记

Aerozw
16 阅读1分钟

React路由与项目实践

一、课程简介

课程收益：

  • 了解路由的演进历史&原因
  • 了解React-Router的原理
  • 复杂前端应用里结合路由的最佳实践

二、路由的历史

路由是桥梁
image.png

URL解析与路由
image.png

前段的发展阶段
image.png

image.png

1. 静态网站

浏览器解析HTML语言（更新不便利，研发成本过高） image.png

2. 动态网站

动态网站(.ASP .JSP .PHP) image.png

3. 前后端分离

AJAX出现（开始出现前端工程师和后端工程师） image.png

4. 单页应用

Grunt/Webpack
MVC/MVVM
Framework
WebComp
Router
image.png

三、 React-router

1. React-router包

image.png

2.React-router history

BrowserRouter/HashRouter
image.png

image.png

History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录
image.png

源码底层实现
image.png image.png

3. Router-match路由匹配

源码实现和逻辑
image.png image.png

image.png

4. 路由项目实践

存在的问题
image.png

解决的方法
（微前端）巨石SPA->子SPA应用 image.png

image.png

image.png

image.png

image.png

image.png

image.png

四、课程总结

image.png

avatar
文章
阅读
粉丝