react--路由

1.路由
当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个 JavaScript 重新执行，丢失状态。

传统路由基于后端：浏览器——》发送http请求——》url——》分析URL——》返回不同html代码——》浏览器得到返回数据——》据不同数据类型进行不同处理（根据2进制头部信息）

1.1SPA
Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。

优点：

有更好的用户体验（减少请求和渲染和页面跳转产生的等待与空白），页面切换快

重前端，数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑

缺点：

首屏处理慢

不利于 SEO

1.2SPA 的页面切换机制
虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的，但是还是需要根据需求在不同的情况下分内容展示，如果仅仅只是依靠 JavaScript 内部机制去判断，逻辑会变得过于复杂，通过把 JavaScript 与 URL 进行结合的方式： JavaScript 根据 URL 的变化，来处理不同的逻辑，交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由，其本质上与后端路由的思想是一样的。

1.3后端路由与前端路由
后端路由与前端路由在本质上是类似的，都是把不同的 URL 与某个操作进行关联绑定，得到不一样的结果

1.3.1后端路由
通过 HTTP 把请求发送到后端服务器，后端服务器接收到请求以后根据不同的请求 URL 来执行不同的操作，返回处理好的数据（JSON、HTML、JS 代码、CSS、图像……）

需要发送 HTTP 请求

业务逻辑由后端处理，返回处理后的结果给前端（浏览器）

1.3.2前端路由
前端路由只是改变了 URL 或 URL 中的某一部分，但一定不会直接发送请求，可以认为仅仅只是改变了浏览器地址栏上的 URL 而已，JavaScript 通过各种手段处理这种 URL 的变化，然后通过 DOM 操作动态的改变当前页面的结构。

URL 的变化不会直接发送 HTTP 请求
业务逻辑由前端 JavaScript 来完成
目前前端路由主要的模式：

基于 URL Hash 的路由
基于 HTML5 History API 的路由
1.3.2.1URL Hash

通过修改 URL 的 Hash 值来改变 URL，Hash 的变化是不会发送请求的，同时 JavaScript 通过监听 hashchange 事件来动态处理逻辑和页面渲染。

优点

兼容性好

缺点

URL 不美观，SEO 不友好

1.3.2.2HTML5 History API

封装一个函数，该函数通过 HTML5 History 提供的 API 来动态改变 URL ，这种方式也不会发送请求，然后同时根据要改变的目标 URL 来处理逻辑和页面渲染

URL Hash 模式类似 Vue 中的数据拦截机制

HTML5 History API 模式类似 React.js 中的 setState

1.4React.js 中的路由
React.js 路由的基本思想就是，把不同的 URL 与 指定的某些 React.js 组件进行关联，不同的 URL 渲染显示不同的组件，其它框架（如：vue、angular） 都是一样的思想

2.React Router
理解了路由基本机制以后，也不需要重复造轮子，我们可以直接使用 React Router 库

https://reacttraining.com/react-router/

React Router 提供了多种不同环境下的路由库

web
native

2.1基于 Web 的 React Router
基于 web 的 React Router 为：react-router-dom

2.22安装

npm i -S react-router-dom

2.1.2概览
react-router-dom 的核心是组件，它提供了一系列的组件，如：

Router 组件
BrowserRouter 组件
HashRouter 组件
Route 组件
Link 组件
NavLink 组件
Switch 组件
Redirect 组件
以及其它一些 API，来完成路由的功能

（未完）