前言：在百度搜了很久，也看了很久，就是遇到情况不知道杂用，so 我要去官网撸一遍，等我一会~~

区分图

React Router4.0不是把所有的router整合到一个文件中，而是分布在各自所需要的地方。

1.react-router-dom

    react-router-dom 用于 DOM 绑定的 React Router；react-router-dom包比react-dom多出两个DOM类组件(<Link>和<BrowserRouter>)，所以使用的时候只需要将resct-router-dom引入就可以了。

2.<BrowserRouter>    

    这个是官网推荐的，使用HTML5的history API保持UI与URL同步，高阶路由组件，但是部署这个要配合服务器，会vue的同学可能知道，这个就是路由的history模式，不会的也没关系，我来解释一下：意思就是，一般的网址xxx.xx.xx/box1/box2/test。这时候服务器要去这个域名下的box1文件夹里找box2文件夹里的test文件。但是我们知道，那只是我们写的一个路由，其实并没有那个文件夹，也没有那个文件，需要服务器配合就是解决这个问题的。在用户浏览到这个地址的时候，让服务器重定向在网站的首页，我们的router会处理这个地址，显示相应的组件奥。

    只能有一个子元素。

    这个就写在根节点外面，告诉react，我这个根节点就是一个路由的模式。UI与地址保持一致，没有#号，美观。

BrowserRouter的位置

参数

    basename: 一般你的项目是在服务器的根目录，但是可能你没钱，想在根目录放两个项目，那就得有两个子目录吧。那浏览器访问的根目录啊，所以就得在根目录后面加上项目自己的子目录。

basename图解

        只要在BrowserRouter标签里写上就好，route和link等地方不需要添加前缀。

    getUserConfirmation：func，用户界面之前进行的操作，一般可能用到是否允许获取手机通讯录、地理位置啊啥的，用的不多。

getUserConfirmation

    forceRefresh：用于不支持H5的history模式的浏览器，路由跳转的时候，强制刷新吧。总不能死在当前页面吧。

forceRefresh

    keyLength：我没看懂。。。。

    原文链接：https://www.jianshu.com/p/e3adc9b5f75c

3.<Link>

    就是会被react渲染成<a>标签 。to:跳转到指定路径。不会造成页面的刷新。

4.<Route>

    它的职责就是，当页面的访问地址跟path匹配的时候，就渲染出相应的组件  。  有三个render方法，最常用的就是component，比render的优先级别高。

    属性有path，就是路由地址；

        exact：true；就是路由地址必须一模一样，/one和/one/two是匹配不上的。

        strict：true；path后面带斜杠，匹配所有以path地址开头的任何地址

Route

5.<NavLink>

    为页面导航准备的，它有激活状态。

    属性：activeClassName：激活时的样式名，默认为active

              activeStyle: obj;激活时的样式对象

6.<switch>

只渲染出第一个与当前访问地址匹配的<Router>