react-router4的學習--React-router和React-router-dom的區別

學時候在網上看各種資料總會遇到這倆：React-router和React-router-dom
最早剛開始參與項目的時候也經常會看到這兩個的import，心有疑問，但當時也沒太注意。大概瞭解後就沒在管了（其實是太懶）
現在抽空來點總結，記錄下自己的學歷過程。
如：

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

或者

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

React-router-dom是在React-router的基礎上增加了 link  BrowserRouter 和 HashRouter，即在瀏覽器環境下運行的一些功能。別的並沒有什麼區別，源碼上也是從react-router導入再導出。
 

BrowserRouter：

原理是html5的 history api (pushState, replaceState 和 popstate 事件)，它不需要在url中加入“#”等的hash，頁面跟隨url動態同步變化。

<BrowserRouter basename={baseUrl}>
    <Route exact path='/' component={pageName} ></Route>
  </BrowserRouter>

basename: 就跟字面的意思一樣，基準URL. 例如：“/home”

HashRouter：

跟字面的意思一樣，通過哈希值來使頁面和url保持一致，默認會有個# ，例如：localhost:3000/#/

Router的還包括MemoryRouter，NativeRouter，StaticRouter等不怎麼常用，可以去看下：
https://reacttraining.com/react-router/web/api

 

Route：子路由，控制路徑對應顯示的組件；
     exact：嚴格匹配，控制匹配到/路徑時不會再繼續向下匹配
     path： 路徑
     component：路徑對應顯示的組件

Link：其實就是頁面上渲染後的a標籤,如下圖例子中的，具體參數作用從字面上大概就能看出來，
常用的：

• pathname - 要鏈接到的路徑
• search - 查詢參數
• hash - URL 中的 hash，例 #hash
• state - 存儲到 location 中的額外狀態數據

<Link to='/path' />
// 或者
<Link to={{
    pathname: '/path',
    search: '?data=aaa',
    hash: '#',
    state: {}
}} />

replace: bool

當設置爲 true 時，點擊鏈接後將替換歷史堆棧中的當前條目，而不是添加新條目。默認爲 false。

innerRef: fun

允許訪問組件的底層引用

別的還有title、id 或 className 等。

NavLink： 爲當前選擇的路由設置類名、樣式以及回調函數等

activeClassName: string
activeStyle: object
strict: bool  如果爲 true，則在確定位置是否與當前 URL 匹配時，將考慮位置的路徑名後面的斜槓。
Prompt：
用於在位置跳轉之前給予用戶一些確認信息，設置 when={true} 或 when={false} 以阻止或允許相應的導航

import { Prompt } from 'react-router'

<Prompt
  when={formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

 

 

。。。待續