react-router4.x 组件和api介绍

react-router实用4.2.0

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，用来设置路由的基础链接，<BrowserRouter basename="/api" />   
       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 = () => (
       <div>组件一</div>
   )
   const MyComponent2 = () => (
       <div>组件二</div>
   )
   class MyComponent extends React.Component {
       render() {
           const getConfirmation = (message,callback) => {
               const ConFirmComponent = () => (
                   <div>
                       {message}
                       <button onClick={() => {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>确定</button>
                       <button onClick={() => {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消</button>
                   </div>
               )
               ReactDOM.render(
                   <ConFirmComponent />,
                   document.getElementById('root1')
               )
           }
           return (
               <Router getUserConfirmation={getConfirmation}>
                   <div>
                       <Prompt message="Are you sure you want to leave?" />
                       <Link to="/a">跳转组件二</Link>
                       <Route component={MyComponent1}/>
                       <Route exact path="/a" component={MyComponent2}/>
                   </div>
               </Router>
           )
       }
   }
   ReactDOM.render(
       <MyComponent/>,
       document.getElementById('root')
   )
   

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

5. Link

   Link的作用和a标签类似
   属性
       to 
           接受path字符串，<Link to="/a" />
           接受对象
           <Link to={{
               pathname: '/courses',  // 传递的pathname
               search: '?sort=name',  // 传递的url参数
               hash: '#the-hash', // 在url参数后面的hash值
               state: { fromDashboard: true } // 自定义属性存在location中
           }}/>
       replace，设置为true，会取代当前历史记录
   

6. NavLink

   NavLink和Link一样最终都是渲染成a标签，NavLink可以给这个a标签添加额外的属性
   <NavLink to="/a">组件一</NavLink> 当点击此路由，a标签默认添加一个名为active的class
   属性
       activeClassName 用于自定义激活a标签的class
       activeStyle 用于设置激活a标签的样式 
           activeStyle={{
               fontWeight: 'bold',
               color: 'red'
           }}
       exact，当路径百分百匹配的时候才展示样式和class，但是不影响路由的匹配，"/a"和"/a/" 是相等的
       strict，这个比exact还很，就算 "/a"和"/a/" 也是不相等的
       isActive，此属性接收一个回调函数，用来做跳转的最后拦截
           <NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>
           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信息对象匹配则跳转
           <NavLink to="/a/123" location={{key:"mb5wu3",pathname:"/a/123"}}/>
   

7. Prompt

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

8. MemoryRouter

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

9. Redirect

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

10. Route

    Route的作用就是用来渲染路由匹配的组件
    路由渲染有三种方式，每一种方式都可以传递match,location,history对象
        component
            用来渲染组件
            <Route path="/a" component={MyComponent1}></Route>
        render  
            用来渲染函数式组件，可以防止重复渲染组件
            <Route path="/b" render={({match,location,history}) => {
                console.log(match,location,history);
                return <div>组件二</div>
            }}></Route>
        children
            和render差不多，不过可以用来动态的展示组件
            差别之处在于，children会在路径不匹配的时候也调用回调从而渲染函数，而render只会在路径匹配的时候触发回调
            <Route path="/b" children={({match,location,history}) => {
                return (
                    match ? <div>组件二</div>:<div>组件二二</div>
                )
            }}></Route>
    属性
        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();
    <Router history={history}>
        ...
    </Router>
    

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 (
            <div>{props.location.pathname}</div>
        )
    }
    const FirstTest = withRouter(MyComponent)