1、區(qū)別

react-router:實(shí)現(xiàn)了路由的核心功能
react-router-dom:基于react-router，加入了在瀏覽器運(yùn)行環(huán)境下的一些功能，例如Link組件、BrowserRouter和HashRouter組件。

2、引入

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

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

3、組件

<BrowserRouter>---<Router>的一種，通過使用HTML5提供的history API(pushState,replaceState,propstate)機(jī)制來維持頁面UI同RUL的統(tǒng)一。
Props

basename: 該router下路由路徑的base url. 應(yīng)該有一個(gè)前置斜杠，但不能有后置斜杠。如果你的頁面路由路徑為某個(gè)子目錄，那base url應(yīng)設(shè)置為這個(gè)子目錄。該頁面的其他路由路徑即在這個(gè)之下。
getUserConfirmation: 路由跳轉(zhuǎn)的二次確認(rèn)函數(shù)，用來攔截Prompt組件, 默認(rèn)情況下使用window.confirm彈框。
forceRefresh: 布爾值，為true時(shí), router在進(jìn)行路由跳轉(zhuǎn)的時(shí)候會(huì)進(jìn)行頁面刷新，可能只在瀏覽器不支持H5 history api的情況下需要使用。
keyLength: 自定義location.key的長(zhǎng)度，默認(rèn)為6. location.key 或者location.state(廢棄)可以用來保存頁面滾動(dòng)條位置。
children: 需要渲染的‘單個(gè)reactNode元素組件’。

<BrowserRouter basename={'/home'} getUserConfirmation={setConfirmation}>
  <div>
    <Prompt message={'Are you sure to leave'}/>
    <Link to={'/test'}>ceshi</Link>
    <Route path={'/test'} component={Test}/>
  </div>
 </BrowserRouter>

<HashRouter>---<Router>的一種，通過URL hash部分，如location.hash、 hashChange來保持UI同URL一致。
props

basename
getUserConfirmation
hashType:string : 帶斜杠，不帶斜杠。eg. #/ and #/sunshine/lollipops, # and #sunshine/lollipops
children:reactNode 需要render的‘單個(gè)子元素’

<Link>---進(jìn)入頁面路由的鏈接,最終被渲染成a標(biāo)簽。
props

to: string, 路由鏈接， 由location的path, search, hash屬性拼接而成。
to : object { pathname: 跳轉(zhuǎn)路徑，search: 查詢參數(shù)， hash: url中的hash, eg. #a-hash, state:存儲(chǔ)到location中的額外狀態(tài)數(shù)據(jù)}
replace: 布爾值- 為true時(shí)，將會(huì)替換history stack中的當(dāng)前路徑
innerRef: function 允許訪問Link的底層組件<a></a>，eg. <Link to='/' innerRef={(node)=>{this.refNode=node}} />
others: 可以傳入<a> 元素的屬性，eg. title, id, className, etc.

<Link to={{
  pathname: `/Detail/${itemFuns.name}`,
  state: {
    name: `${itemFuns.name}`
  },
}}>
  {itemFuns.description}
</Link>

<NavLink>---<Link> 的特殊版本，當(dāng)匹配當(dāng)前URL時(shí)，會(huì)給當(dāng)前l(fā)ink添加樣式。
props

activeClassName: string, 渲染樣式
activeStyle:object, 渲染樣式
exact: bool, 為true時(shí)，表示精準(zhǔn)匹配路由。
strict: bool, 為true時(shí)，當(dāng)進(jìn)行路由匹配時(shí)，后置斜杠將會(huì)被考慮在內(nèi)。
isActive: func, 額外函數(shù)來進(jìn)一步驗(yàn)證當(dāng)前路由是否匹配。
location: isActive用來比較當(dāng)前路徑是否匹配路由，location用來比較不同的路徑。
ariaCurrent : string, link的語義化標(biāo)識(shí)，page| step| location | date| time | true

<Prompt>---當(dāng)想阻止用戶跳轉(zhuǎn)路由，可以使用<prompt>提示用戶是否跳轉(zhuǎn)，與router的getUserConfirmation屬性結(jié)合使用。
props

message： string， 提示的信息。
message : func, 參數(shù)為即將跳轉(zhuǎn)的location對(duì)象，返回message。
when : bool, true表示阻止跳轉(zhuǎn)，false，接受跳轉(zhuǎn)。

<MemoryRouter>---<Router>一種, 將url history保存在內(nèi)存中，不可再頁面地址欄中讀取，通常用于測(cè)試或者非瀏覽器的環(huán)境，如react native。
props

initialEntries: array, history stack中保存的locations 數(shù)組，locations可以為對(duì)象或者url字符串
initialIndex : number, 初始化location在initialEntries中的位置
getUserConfirmation: func, 跳轉(zhuǎn)路由的二次確認(rèn)函數(shù)，與<Prompt>結(jié)合使用
keyLength:number, location.key的長(zhǎng)度，默認(rèn)6位
children: node, 單個(gè)元素react 組件

<Redirect>---重定向。使用redirect將跳轉(zhuǎn)到一個(gè)新的路由，新的location將會(huì)覆蓋history stack中的當(dāng)前l(fā)ocation。
props

to: string, url地址
to: object, location object, 屬性有：pathname: 跳轉(zhuǎn)路徑，
search: 查詢參數(shù)， hash: url中的hash, eg. #a-hash, state:存儲(chǔ)到location中的額外狀態(tài)數(shù)據(jù). location中的state可以在redirect跳轉(zhuǎn)組件的this.props.location.state訪問
push: 為true表示redirect path將往history stack中推一條新數(shù)據(jù)而不是替換
from: redirect from url, 會(huì)進(jìn)行正則匹配。只能用在<Switch>中
exact: bool, 精準(zhǔn)匹配
strict: bool, 嚴(yán)格模式，后斜杠將考慮在內(nèi)

<Route>---React router中最重要的模塊，主要職責(zé)是當(dāng)location匹配路由時(shí)，會(huì)將UI render出來。
props

component: 當(dāng)傳遞component渲染UI時(shí)，router將會(huì)用React.createElement來將組件封裝成一個(gè)新的React element, 當(dāng)傳遞一個(gè)inline func, react每次render都會(huì)unmount, mount一個(gè)新的組件，會(huì)消耗性能，此時(shí)可以使用render/children prop
render: func, inline func不會(huì)有上述性能問題，參數(shù)同route props相同
children: func, 有時(shí)，無論location是否匹配路由，你都想render某個(gè)UI，此時(shí)可以使用children prop ,等同于render。 函數(shù)參數(shù)同route props
component, render優(yōu)先級(jí)高于children，所以不要一次使用一種以上的渲染方式
path: string | string[], 一個(gè)url字符串，或者一組url 字符串，會(huì)進(jìn)行正則匹配，如果path為空，那么會(huì)認(rèn)為匹配
exact: bool, 為true, 要精準(zhǔn)匹配，path同location.pathname完全一致
strict: bool, 為true, path的后置斜杠將在進(jìn)行匹配時(shí)被考慮在內(nèi)。
location: object, route path每次都會(huì)與當(dāng)前瀏覽器的url進(jìn)行匹配，來確定是否渲染，但是location可以使一個(gè)不匹配的pathname通過這種匹配，從而渲染。注意：如果一個(gè)<Route>寫在了<Switch>中，<Switch>中的location prop將覆蓋<Route>中的location
sensitive: bool, pathname,current url匹配時(shí)，大小寫是否敏感.

<Router>---所有路由組件的最底層接口。
props

history: object, 路由導(dǎo)航歷史記錄對(duì)象
children: 單個(gè)子元素組件

<Switch>---渲染<Route>或<Redirect>中第一個(gè)匹配location的組件，且子元素只能為<Route>或<Redirect>。
props

location: object,
children: switch的children組件只能為<Route>或<Redirect>