React Router Dom API 中文 文檔

<BrowserRouter>

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

Props

basename: 該router下路由路徑的base url. 應該有一個前置斜槓，但不能有後置斜槓。如果你的頁面路由路徑爲某個子目錄，那base url應設置爲這個子目錄。該頁面的其他路由路徑即在這個之下。

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

getUserConfirmation: 路由跳轉的二次確認函數，用來攔截Prompt組件, 默認情況下使用window.confirm彈框

<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>

forceRefresh: 布爾值，爲true時, router在進行路由跳轉的時候會進行頁面刷新，可能只在瀏覽器不支持H5 history api的情況下需要使用。
keyLength: 自定義location.key的長度，默認爲6. location.key 或者location.state(廢棄)可以用來保存頁面滾動條位置。
children: 需要渲染的‘單個reactNode元素組件’

<HashRouter>

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

注意事項：
Hash History不支持location.key 或 location.state. hashRouter一般用於低版本瀏覽器，在較高版本瀏覽器中推薦配置服務器端使用browserHistory

props

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

<Link>

進入頁面路由的鏈接
props

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

<NavLink>

<Link> 的特殊版本，當匹配當前URL時，會給當前link添加樣式。
props

activeClassName: string, 渲染樣式
activeStyle:object, 渲染樣式
exact: bool, 爲true時，表示精準匹配路由。
strict: bool, 爲true時，當進行路由匹配時，後置斜槓將會被考慮在內。
isActive: func, 額外函數來進一步驗證當前路由是否匹配。eg.

// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

location: isActive用來比較當前路徑是否匹配路由，location用來比較不同的路徑。
ariaCurrent : string, link的語義化標識，page| step| location | date| time | true

<Prompt>

當想阻止用戶跳轉路由，可以使用<prompt>提示用戶是否跳轉，與router的getUserConfirmation屬性結合使用。
props

message： string， 提示的信息
message : func, 參數爲即將跳轉的location對象，返回message
when : bool, true表示阻止跳轉，false，接受跳轉

<MemoryRouter>

<Router>一種, 將url history保存在內存中，不可再頁面地址欄中讀取，通常用於測試或者非瀏覽器的環境，如react native
props

initialEntries: array, history stack中保存的locations 數組，locations可以爲對象或者url字符串
initialIndex : number, 初始化location在initialEntries中的位置
getUserConfirmation: func, 跳轉路由的二次確認函數，與<Prompt>結合使用
keyLength:number, location.key的長度，默認6位
children: node, 單個元素react 組件

<Redirect>

使用redirect將跳轉到一個新的路由，新的location將會覆蓋history stack中的當前location.
props

to: string, url地址
to: object, location object, 屬性有：pathname: 跳轉路徑，search: 查詢參數， hash: url中的hash, eg. #a-hash, state:存儲到location中的額外狀態數據. location中的state可以在redirect跳轉組件的this.props.location.state訪問
push: 爲true表示redirect path將往history stack中推一條新數據而不是替換他
from: redirect from url, 會進行正則匹配。只能用在<Switch>中
exact: bool, 精準匹配
strict: bool, 嚴格模式，後斜槓將考慮在內

<Route>

React router中最重要的模塊，主要職責是當location匹配路由時，會將UI render出來。

Route render methods

1. <Route component>
2. <Route render>
3. <Route children>
   以上適用於不同的環境，每次只能用其中一種方法，component是最常用的

props

component: 當傳遞component渲染UI時，router將會用React.createElement來將組件封裝成一個新的React element, 當傳遞一個inline func, react每次render都會unmount, mount一個新的組件，會消耗性能，此時可以使用render/children prop
render: func, inline func不會有上述性能問題，參數同route props相同
children: func, 有時，無論location是否匹配路由，你都想render某個UI，此時可以使用children prop ,等同於render。 函數參數同route props

component, render優先級高於children，所以不要一次使用一種以上的渲染方式

path: string | string[], 一個url字符串，或者一組url 字符串，會進行正則匹配，如果path爲空，那麼會認爲匹配
exact: bool, 爲true, 要精準匹配，path同location.pathname完全一致
strict: bool, 爲true, path的後置斜槓將在進行匹配時被考慮在內。
location: object, route path每次都會與當前瀏覽器的url進行匹配，來確定是否渲染，但是location可以使一個不匹配的pathname通過這種匹配，從而渲染。注意：如果一個<Route>寫在了<Switch>中，<Switch>中的location prop將覆蓋<Route>中的location
sensitive: bool, pathname,current url匹配時，大小寫是否敏感.

<Router>

所有路由組件的最底層接口, 通常，將用以下某種高階路由：

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>
使用低階 <Router> 的最常見用例是同步一個自定義歷史記錄與一個狀態管理庫，比如 Redux 或 Mobx。請注意，將 React Router 和狀態管理庫一起使用並不是必需的，它僅用於深度集成。

props

history: object, 路由導航歷史記錄對象
children: 單個子元素組件

<StaticRouter>

靜態路由，頁面的location 將不會改變。一般用於服務器端。
props

basename: 所有location的base url，有前置斜槓無後置斜槓
location: string
location: object
context: object, 渲染中，組件會添加屬性到context上保存某些信息
children: 單元素組件

<Switch>

渲染<Route>或<Redirect>中第一個匹配location的組件
props

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