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，支持参数传递

四、资料