React Router简介
React Router简介
React Router 是完整的 React 路由解决方案，它保持 UI 与 URL 同步，拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。
react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
react-router-native 用于 React Native 的 React Router
react-router-redux React Router 和 Redux 的集成
react-router-config 静态路由配置的小助手
一、安装（不需要安装 react-router，直接安装 react-router-dom 就可以了）
1、npm install --save react-router-dom
2、首先引入对应的模块
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom'
3、这三个都是标签名。
（1）Router 表示路由包裹标签，另外2个应该放在这个标签里---标签内，只能放一个元素，一般是放一个 div 标签，然后其他标签放这个 div 标签里；
（2）Link 表示导航标签，就是说点击这个后，会将 url 进行切换---标签是导航标签，类似 <a></a> 标签，点击后会跳转 url；
（3）Route 表示模块标签，当当前的 url 符合 Route 标签的设置时，会将该标签显示出来---标签是路由组件标签，当 path 属性和当前 url 相同时，会自动显示 component 属性中匹配的标签（所有匹配成功的都会显示）；
二、主要组件
1、路由器部分
BrowserRouter：使用H5的历史记录API，保持ul和url同步，需要服务器配置才可使用
HashRouter：使用url的hash部分，保持ul和url同步，适用于旧版浏览器，推荐使用BrowserRouter
区别：hash 地址就是指 # 号后面的 url。
假如有一个 Link 标签，点击后跳转到 /abc/def。
BrowserRouter： http://localhost:8080/abc/def
HashRouter： http://localhost:8080/#/abc/def
如果有服务器端的动态支持，建议使用 BrowserRouter，否则建议使用 HashRouter。
原因在于，如果是单纯的静态文件，假如路径从 / 切换到 /a 后，此时刷新页面，页面将无法正常访问。
二者的替换方法很简单，我们在引入 react-router-dom 时，如以下：
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
将 BrowserRouter 修改为 HashRouter 就可以了，基本不需要修改其他东西。
2、导航部分，路由跳转标签
Link：路由跳转组件，其实就是a标签（to，replace）
NavLink：对比Link有更多API，更方便，比如可设置路径匹配时标签的类名和样式（属性activeClassName、activeStyle、isActive、exact、restrict、to）
3、模块部分，路由跳转对象
Route：由Link路由跳转到的部分（path、compoent、exact、strict）
4、其他
Redirect：适用于重定向到其他地址（to）
Switch：只匹配第一个与路径匹配的Route或Redirect
Prompt：切换路径时给出提示（message，when）
三、主要属性
history：历史相关信息
location：位置信息，确定来去
match：如何匹配url，支持参数传递
四、资料
react-router官方
https://reacttraining.com/react-router/web/api/BrowserRouter
react-router4相关教程
https://www.cnblogs.com/Michelle20180227/p/10130630.html
https://www.cnblogs.com/Michelle20180227/p/10129873.html
BrowserRoute服务器配置
https://www.cnblogs.com/Michelle20180227/p/10129687.html
