上节课呢我们介绍了SPA，为什么要介绍SPA呢？因为我们React以后写的应用都是SPA应用。这节课我们来介绍一下路由
回顾
在开始介绍路由的内容之前呢，我们来对上节课来做一个简单的回顾。
SPA是单页面web应用SPA应用只有一个完整的页面- 点击这个页面中的链接的时候并不会刷新页面，只会对页面来做局部的更新
- 数据都要通过
ajax请求来获取，并在前端异步展示。 - 多页面重复代码多，开发效率低。
以上便是上节课的内容，都是一些概念上的问题，不是什么对开发重要的东西。那么接下来我们来介绍一下路由。
为什么要用路由
我们虽然知道这个东西的存在了，那么这个玩意儿存在的意义是什么呢？为什么我们要用react路由呢？
我们来回想一下我们上节课的多页面Demo。我们要想在两个导航项之间切换本质上是不是两个页面上的切换？那么如果我们用SPA理念来设计刚才的页面会是什么样子？
是不是只有一个页面，页面上有一个标题组件，一个导航栏组件，一个内容组件？这样的设计自然是合理的，但是当我们点击导航栏中的导航项的时候我们怎么实现？很简单，我们其实通过state是不是就可以实现？
但是如果我们内容组件中的内容有链接要跳转的话我们用state就不那么方便了。所以我们就引入了路由技术。
路由的工作流程
其实路由工作流程是很简单的，当我们点击某一块功能点的时候，不做页面刷新和跳转，路由会将浏览器地址栏改成该功能点的实际链接地址。
但是我们都知道，只要是<a>链接，只要点击了就会做跳转，但是为什么这里可以不跳转呢？因为这是一个特殊的链接，这个和常规的链接不一样，这里是一个路由链接。所以当我们点击这个链接的时候其他的什么也没有发生，路由监测到这个路由链接被点击了，然后去修改浏览器地址栏。
但是路由里呢还有另外一个模块，会监听浏览器的地址栏，一旦发现地址栏的路径有变化，就会把地址栏中地址对应的组件展示到页面上。
以上就是路由的工作原理，就完全依赖与浏览器的地址栏中的路径。
理解路由
我们也说了为什么要用路由，而且也简单介绍了路由的大致工作原理，那么我们来理解一下什么是路由吧。
我们来回想一下所说的路由工作流程，是不是我们一点路由链接，路由就会去该地址栏的路径，路径一变，路由是不是就监听到了，然后就把该路径对应的组件展示到页面上？那么这样来说的话，有没有觉得路由就是一个浏览器地址栏路径和组件的一个映射关系啊？只要路由监听到路径，就会展示对应的组件，这就是一个key是路径而value是组件的一个映射。
路由分类
但是实际上呢value还可以是一个函数，为什么呢？因为路由是有分类的，分为后端路由和前端路由。那么后端路由和前端路由都是什么意思呢？
- 后端路由
- 理解：路由映射中的
vale是一个函数，用来处理客户端提交的请求 - 注册路由：
router.get(path, function(req, res)) - 工作过程：当
node接收到请求，根据请求路径找到匹配的路由，然后调用路由中的函数来处理请求并返回响应数据 - 前端路由：
- 理解：浏览器前端路由，
value是组件用于展示内容 - 注册路由：
<Route path="/test" component={Test}> - 工作过程：当浏览器地址栏的路径变为
/test时，当前路由组件就会变为Test组件
当然我们现在写的是react的前端应用，那么我们基本不会用到后端路由。
总结
- 引入路由技术使得点击链接不跳转不刷新页面
- 路由会修改和监听浏览器地址栏的路径，并根据路径展示相应组件
- 路由是一个浏览器地址栏路径与函数或者组件的映射关系
- 路由分为后端路由和前端路由
Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.
Link of this article：https://work.lynchow.com/article/unstand_router/
