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)