react-router4相关属性api介绍

react-router非常复杂整体，比vue-router强大很多，好好研究，对你自身能力提高很有帮助

1. 安装

cnpm install react-router --save 包含react router核心
cnpm install react-router-dom --save 包含react router的dom绑定

2. BrowserRouter

BrowserRouter是react路由的容器
相关属性如下
    basename，用来设置路由的基础链接，   
    getUserConfirmation，用来拦截Prompt组件，并且决定是否跳转，我专门做了一个例子
    forceRefresh，用来设置是否强制浏览器整体刷新，默认是false
    keLength，用来设置location.key的长度，默认是6，可以自定义
    注意，BrowserRouter只能有一个子节点

3. BrowserRouter属性getUserConfirmation的使用例子

由于默认是用的window.confirm做验证，很丑，可以自己定义
使用必须导入Prompt这个组件是用来传递确认信息的
import React from 'react'
import ReactDOM from 'react-dom'
import { Prompt } from 'react-router'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'
const MyComponent1 = () => (
    
组件一
)
const MyComponent2 = () => (
    
组件二
)
class MyComponent extends React.Component {
    render() {
        const getConfirmation = (message,callback) => {
            const ConFirmComponent = () => (
                

                    {message}
                     {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>确定
                     {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消
                
            )
            ReactDOM.render(
                ,
                document.getElementById('root1')
            )
        }
        return (
            
                

                    
                    跳转组件二
                    
                    
                
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
)

4. HashRouter

，这个是用来兼容老浏览器的，略

5. Link

Link的作用和a标签类似
属性
    to 
        接受path字符串，
        接受对象
        
    replace，设置为true，会取代当前历史记录

6. NavLink

NavLink和Link一样最终都是渲染成a标签，NavLink可以给这个a标签添加额外的属性
组件一 当点击此路由，a标签默认添加一个名为active的class
属性
    activeClassName 用于自定义激活a标签的class
    activeStyle 用于设置激活a标签的样式 
        activeStyle={{
            fontWeight: 'bold',
            color: 'red'
        }}
    exact，当路径百分百匹配的时候才展示样式和class，但是不影响路由的匹配，"/a"和"/a/" 是相等的
    strict，这个比exact还很，就算 "/a"和"/a/" 也是不相等的
    isActive，此属性接收一个回调函数，用来做跳转的最后拦截
        组件一
        const oddEvent = (match, location) => {
            console.log(match,location)
            if (!match) {
                return false
            }
            console.log(match.id)
            return true
        }
        match里面保存了路由匹配信息的参数，是动态化的
        location里面保存的Link中的to传递的所有信息
    location，此参数用来接受一个location对象，如果对象信息和当前的location信息对象匹配则跳转
        

7. Prompt

Prompt是用来提示用户是否要跳转，给用户提示信息默认使用window.confirm，可以结合getUserConfirmation构建自定义提示信息
import { Prompt } from 'react-router'
属性
    message
        传递字符串，用于提示用户的展示信息
        传递函数，可以接受location对象作为参数
             {
                console.log(location);
                return true
            }}/>
            return true表示可以直接跳转，无需验证
            return '你好'表示要给提示给用户的信息
    when，接受一个布尔值，表示是否执行prompt

8. MemoryRouter

主要用于native端，路由历史不通过URL缓存，而是保存在内存中
也就是说，地址栏地址不变，而在内存中保存路由信息，当浏览器刷新时，自动跳回路由首页
还是可以通过访问location对象得到路由信息
import { MemoryRouter } from 'react-router'
属性
    initialEntries 一个数组用来传递路由的初始匹配值
        ...
        数组成员可以是字符串也可以是location对象，成员的默认顺序是最左边的展示出来
    initialIndex 用来确定initialEntries数组展示路由的索引
        ...
    getUserConfirmation 和上面讲的一样
    keyLength 也是用来设置location.key的长度的

9. Redirect

路由重定向
import { Redirect } from 'react-router'
使用这个  代替组件使用
属性
    to
        字符串，要重定向的路径
        对象，location对象
    push，布尔值，是否将当前路径存到history中（是Link标签的to路径）
    from，用来指定路由的原始值，如果不是给定的字符串，那么不渲染，反之渲染，只能用于switch组件中

10. Route

Route的作用就是用来渲染路由匹配的组件
路由渲染有三种方式，每一种方式都可以传递match,location,history对象
    component
        用来渲染组件
        
    render  
        用来渲染函数式组件，可以防止重复渲染组件
         {
            console.log(match,location,history);
            return 
组件二
        }}>
    children
        和render差不多，不过可以用来动态的展示组件
        差別之处在于，children会在路径不匹配的时候也调用回调从而渲染函数，而render只会在路径匹配的时候触发回调
         {
            return (
                match ? 
组件二
:
组件二二
            )
        }}>
属性
    path，字符串，匹配的路径
    exact，布尔值，路径完全匹配的时候跳转 "/a/"和"/a"是一样的
    strict，布尔值，单独使用和没有使用这个属性没有任何区別，如果和exact一起使用可以构建更为精确的匹配模式。"/a/"和"/a"是不同的
    location，传递route对象，和当前的route对象对比，如果匹配则跳转，如果不匹配则不跳转。另外，如果route包含在swicth组件中，如果route的location和switch的location匹配，那么route的location会被switch的location替代

11. Router

低级路由，适用于任何路由组件，主要和redux深度集成，使用必须配合history对象
使用Router路由的目的是和状态管理库如redux中的history同步对接
关于history插件的使用请看 http://www.cnblogs.com/ye-hcj/p/7741742.html
import { Router } from 'react-router'
import { createBrowserHistory } from 'history/createBrowserHistory'
const history = createBrowserHistory();

    ...

12. StaticRouter，

静态路由，主要用于服务端渲染，暂不涉及

13. Switch

Switch组件内部可以是Route或者Redirect，只会渲染第一个匹配的元素
属性
    location
        Switch可以传递一个location对象，路由匹配将和这个location对象进行比较，而不是url
        Route元素会比较path，Redirect会比较from，如果他们没有对应的属性，那么就直接匹配

14. history

这里的history对象是使用history插件生成的，http://www.cnblogs.com/ye-hcj/p/7741742.html已经详细讲过了
记住一点，再使用location做对比的使用，通过history访问的location是动态变化的，最好通过Route访问location

15. location

location对象表示当前的路由位置信息，主要包含如下属性
{
    hash: undefined,
    key: "k9r4i3",
    pathname: "/c",
    state: undefined,
    search: ""
}

16. match

match对象表示当前的路由地址是怎么跳转过来的，包含的属性如下
{
    isExact: true, // 表示匹配到当前路径是否是完全匹配
    params: {}, // 表示路径的动态参数值
    path: '/c', // 匹配到的原始路径
    url: '/c' // 匹配到的实际路径
}

17. matchPath

matchPath也是和后端相关的，主要作用就是生成一个match对象
import { matchPath } from 'react-router'
const match = matchPath('/a/123',{
    path: '/a/:id',
    exact: true,
    strict: false
})
第一个参数是pathname
第二个参数是一个对象，里面的属性和route的属性类似，用来和pathname做对比
如果匹配的话，就产生一个match对象，反之，null

18. withRouter

当一个非路由组件也想访问到当前路由的match,location,history对象，那么withRouter将是一个非常好的选择
import { withRouter } from 'react-router'
const MyComponent = (props) => {
    const { match, location, history } = this.props
     return (
        
{props.location.pathname}
    )
}
const FirstTest = withRouter(MyComponent)

参考文档：
react-router