前端路由

[图片上传失败...(image-b84e9e-1510470910952)]
后端概念：

模板引擎开发页面时：
http://abc.edu.cn/bbs/forum.php
这种就是我们所说的SSR（Server Side Render），通过服务器的渲染，直接返回页面。

1.浏览器发出请求

2.服务器监听到端口有请求过来，解析url路径

3.根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）

4.浏览器根据数据包的Content-Type来决定如何解析数据

路由：与后端服务器交互的一种方式，通过不同的路径，请求不同的资源。

前端路由：
90年代初。大多数网页通过直接返回HTML进行显示，每次操作都需要重新刷新页面。
Ajax出现以后，Web页面的交互不用每次都刷新页面了。
异步交互体验为我们带来了SPA（单页应用），不仅页面交互不需要刷新，页面跳转页不需要刷新，为了实现单页应用，就有了前端路由。

实现原理：
本质：检测url的变化，截获url地址，然后解析来匹配规定好的路由规则。

2014以前一般通过改变#后面的hush值。因为hash值的改变不会导致发送请求，但是会触发hashchange事件，我们可以通过这个事件得到hash值的变化。

2014以后，因为HTML5标准发布，多了pushState和replaceState，通过这两个API可以改变url地址并且不会发送请求。这样子就不会多出一个#，更加美观。通过popstate来监听。
带来的问题是：当用户进行刷新页面的操作，浏览器会给服务器发送请求。需要服务器的支持，也就是把所有路由重定向到根页面。也就是我们在nginx里面经常做的配置：try_files $uri /index.html;

react-router源码：

  componentWillMount() {
    addEventListener("popstate", this.handlePop)
  }

  componentWillUnmount() {
    removeEventListener("popstate", this.handlePop)
  }

  handlePop = () => {
    this.forceUpdate()
  }