react-router-dom 4 基礎api

BrowserRouter

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 來保持 UI 和 URL 的同步。

<BrowserRouter
  basename={string}
  forceRefresh={bool}
  getUserConfirmation={func}
  keyLength={number}
>

basename: string
全部位置的基準 URL。若是你的應用程序部署在服務器的子目錄，則須要將其設置爲子目錄。basename 的正確格式是前面有一個前導斜槓，但不能有尾部斜槓。
例子：

<BrowserRouter basename="/calendar">
  <Link to="/today" />
</BrowserRouter>

效果：

<a href="/calendar/today" />

forceRefresh: bool
若是爲 true ，在導航的過程當中整個頁面將會刷新。通常狀況下，只有在不支持 HTML5 history API 的瀏覽器中使用此功能。
例子：

const supportsHistory = 'pushState' in window.history;
<BrowserRouter forceRefresh={!supportsHistory} />

getUserConfirmation: func
用於確認導航的函數，默認使用 window.confirm。例如，當從 /a 導航至 /b 時，會使用默認的 confirm 函數彈出一個提示，用戶點擊肯定後才進行導航，不然不作任何處理。譯註：須要配合 <Prompt> 一塊兒使用。

// 這是默認的確認函數
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />

KeyLength：數字，設置Location.Key的長度；

<HashRouter>

使用 URL 的 hash 部分（即 window.location.hash）來保持 UI 和 URL 的同步。

<HashRouter
  basename={string}
  getUserConfirmation={func}
  hashType={string}  
>
  <App />
</HashRouter>

basename,getUserConfirmation和BrowserRouter功能同樣

hashType: string
window.location.hash 使用的 hash 類型，有以下幾種：
slash - 後面跟一個斜槓，例如 #/ 和 #/sunshine/lollipops
noslash - 後面沒有斜槓，例如 # 和 #sunshine/lollipops
hashbang - Google 風格的 ajax crawlable，例如 #!/ 和 #!/sunshine/lollipops
默認爲 slash。

<Link>

爲你的應用提供聲明式的、可訪問的導航連接。
注：必需要有to屬性，不然頁面報錯

this.props.history.push({ pathname:"/inbox", query:{ name:"inbox", myas:"哈哈" } }) 
<Link to="/about" >About</Link>

to: string
一個字符串形式的連接地址，經過 pathname、search 和 hash 屬性建立。
<Link to='/courses?sort=name' />

to: object
一個對象形式的連接地址，能夠具備如下任何屬性：
pathname - 要連接到的路徑
search - 查詢參數
hash - URL 中的 hash，例如 #the-hash
state - 存儲到 location 中的額外狀態數據

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  query: {
id: '',
}
  state: {
    fromDashboard: true
  }
}} />

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

<Link to="/courses" replace />

<NavLink>

一個特殊版本的 <Link>，它會在與當前 URL 匹配時爲其呈現元素添加樣式屬性。

<NavLink to="/about">About</NavLink>

activeClassName: string
當元素處於激活狀態時應用的類，默認爲 active。它將與 className 屬性一塊兒使用。

<NavLink to="/faq" activeClassName="selected">FAQs</NavLink>

activeStyle: object
當元素處於激活狀態時應用的樣式。

const activeStyle = {
  fontWeight: 'bold',
  color: 'red'
};

<NavLink to="/faq" activeStyle={activeStyle}>FAQs</NavLink>

<Prompt>

用於在位置跳轉以前給予用戶一些確認信息。當你的應用程序進入一個應該阻止用戶導航的狀態時（好比表單只填寫了一半），彈出一個提示。

import { Prompt } from 'react-router-dom';

<Prompt
  when={formIsHalfFilledOut}
  message="你肯定要離開當前頁面嗎？"
/>

message: string
當用戶試圖離開某個位置時彈出的提示信息。

<Prompt message="你肯定要離開當前頁面嗎？" />

message: func
將在用戶試圖導航到下一個位置時調用。須要返回一個字符串以向用戶顯示提示，或者返回 true 以容許直接跳轉。

<Prompt message={location => {
  const isApp = location.pathname.startsWith('/app');

  return isApp ? `你肯定要跳轉到${location.pathname}嗎？` : true;
}} />

when: bool
在應用程序中，你能夠始終渲染 <Prompt> 組件，並經過設置 when={true} 或 when={false} 以阻止或容許相應的導航，而不是根據某些條件來決定是否渲染 <Prompt> 組件。
譯註：when 只有兩種狀況，當它的值爲 true 時，會彈出提示信息。若是爲 false 則不會彈出。

<Prompt when={true} message="你肯定要離開當前頁面嗎？" />

<Redirect>

使用 <Redirect> 會導航到一個新的位置。新的位置將覆蓋歷史堆棧中的當前條目，例如服務器端重定向（HTTP 3xx）。

import { Route, Redirect } from 'react-router-dom';

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard" />
  ) : (
    <PublicHomePage />
  )
)} />

to: string
要重定向到的 URL。

<Redirect to="/somewhere/else" />

to: object
要重定向到的位置，其中 pathname 能夠是可以理解的任何有效的 URL 路徑。

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: {
    referrer: currentLocation
  }
}} />

例中的 state 對象能夠在重定向到的組件中經過 this.props.location.state 進行訪問。

push: bool
若是爲 true，重定向會將新的位置推入歷史記錄，而不是替換當前條目。

<Redirect push to="/somewhere/else" />

<Route>

exact：bool
若是爲 true，則只有在 path 徹底匹配 location.pathname 時才匹配。

<Route exact path="/one" component={OneComponent} />

path: string

<Route path="/users/:id" component={User} />

沒有定義 path 的 <Route> 老是會被匹配。

render: func
使用 render 能夠方便地進行內聯渲染和包裝，而無需進行上文解釋的沒必要要的組件重裝。
// 方便的內聯渲染

<Route path="/home" render={() => <div>Home</div>} />

component
指定只有當位置匹配時纔會渲染的 React 組件，該組件會接收 route props 做爲屬性。

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}
<Route path="/user/:username" component={User} />

children: func
有時候不論 path 是否匹配位置，你都想渲染一些內容。在這種狀況下，你可使用 children 屬性。除了不管是否匹配它都會被調用之外，它的工做原理與 render 徹底同樣。
children 渲染方式接收全部與 component 和 render 方式相同的 route props，除非路由與 URL 不匹配，不匹配時 match 爲 null。這容許你能夠根據路由是否匹配動態地調整用戶界面。以下所示，若是路由匹配，咱們將添加一個激活類：

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest} />
    </li>
  )} />
)

<ul>
  <ListItemLink to="/somewhere" />
  <ListItemLink to="/somewhere-else" />
</ul>

這對動畫也頗有用：

<Route children={({ match, ...rest }) => (
  {/* Animate 將始終渲染，所以你能夠利用生命週期來爲其子元素添加進出動畫 */}
  <Animate>
    {match && <Something {...rest} />}
  </Animate>
)} />

警告：<Route component> 和 <Route render> 優先於 <Route children>，所以不要在同一個 <Route> 中同時使用多個。
組件中
1) path
每一個 Route 都須要定義一個 path 屬性，當使用 BrowserRouter 時，path 用來描述這個Router匹配的 URL 的pathname;當使用 HashRouter時，path 用來描述這個 Route 匹配的 URL 的 hash。例如，使用 BrowserRouter 時，<Route path=''foo' /> 會匹配一個 pathname 以 foo 開始的 URL （如: http://example.com/foo）。當 URL 匹配一個 Route 時，這個 Route 中定義的組件就會被渲染出來。

2) match
當 URL 和 Route匹配時，Route 會建立一個 match 對象做爲 props 中的一個 屬性傳遞給被渲染的組件。這個對象包含如下4個屬性。
（1）params: Route的 path 能夠包含參數，例如 <Route path="/foo/:id" 包含一個參數 id。params就是用於從匹配的 URL 中解析出 path 中的參數，例如，當 URL = 'http://example.ocm/foo/1' 時，params= {id: 1}。
（2）isExact: 是一個布爾值，當 URL 徹底匹時，值爲 true; 當 URL 部分匹配時，值爲 false.例如，當 path='/foo'、URL="http://example.com/foo" 時，是徹底匹配; 當 URL="http://example.com/foo/1" 時，是部分匹配。
（3）path: Route 的 path 屬性，構建嵌套路由時會使用到。
（4）url: URL 的匹配的方式

3) history對象
history對象一般具備如下屬性和方法：
length : （number）歷史堆棧中的條目數
action : （string）當前動做（PUSH，REPLACE或POP）
location : (object) 當前位置。
具備如下屬性：
pathname: URL的路徑
search: URL查詢字符串
hash: URL哈希片斷
state: 位置特定的狀態被提供給例如。當這個位置被推到堆棧上時，push（路徑，狀態）。僅在瀏覽器和內存歷史記錄中可用。
push : (path, [state]) - (function) 將新條目推入歷史堆棧
replace : (path, [state]) - (function) 替換歷史堆棧上的當前條目
go(n) : (function) 將歷史堆棧中的指針移動n個條目
goBack() : (function) 至關於 go(-1)
goForward() : (function) 至關於 go(1)
block : (function) 防止導航

<Switch>

用於渲染與路徑匹配的第一個子 <Route> 或 <Redirect>。
這與僅僅使用一系列 <Route> 有何不一樣？
<Switch> 只會渲染一個路由。相反，僅僅定義一系列 <Route> 時，每個與路徑匹配的 <Route> 都將包含在渲染範圍內。考慮以下代碼：

<Route path="/about" component={About} />
<Route path="/:user" component={User} />
<Route component={NoMatch} />

若是 URL 是 /about，那麼 <About>、<User> 和 <NoMatch> 將所有渲染，由於它們都與路徑匹配。這是經過設計，容許咱們以不少方式將 <Route> 組合成咱們的應用程序，例如側邊欄和麪包屑、引導標籤等。
可是，有時候咱們只想選擇一個 <Route> 來呈現。好比咱們在 URL 爲 /about 時不想匹配 /:user（或者顯示咱們的 404 頁面），這該怎麼實現呢？如下就是如何使用 <Switch> 作到這一點：

import { Switch, Route } from 'react-router';

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/:user" component={User} />
  <Route component={NoMatch} />
</Switch>

如今，當咱們在 /about 路徑時，<Switch> 將開始尋找匹配的 <Route>。咱們知道，<Route path="/about" /> 將會被正確匹配，這時 <Switch> 會中止查找匹配項並當即呈現 <About>。一樣，若是咱們在 /michael 路徑時，那麼 <User> 會呈現。
這對於動畫轉換也頗有用，由於匹配的 <Route> 與前一個渲染位置相同。

<Fade>
  <Switch>
    {/* 這裏只會渲染一個子元素 */}
    <Route />
    <Route />
  </Switch>
</Fade>

<Fade>
  <Route />
  <Route />
  {/* 這裏老是會渲染兩個子元素，也有多是空渲染，這使得轉換更加麻煩 */}
</Fade>

location: object
用於匹配子元素而不是當前歷史位置（一般是當前的瀏覽器 URL）的 location 對象。

children: node
全部 <Switch> 的子元素都應該是 <Route> 或 <Redirect>。只有第一個匹配當前路徑的子元素將被呈現。
<Route> 組件使用 path 屬性進行匹配，而 <Redirect> 組件使用它們的 from 屬性進行匹配。沒有 path 屬性的 <Route> 或者沒有 from 屬性的 <Redirect> 將始終與當前路徑匹配。
當在 <Switch> 中包含 <Redirect> 時，你可使用任何 <Route> 擁有的路徑匹配屬性：path、exact 和 strict。from 只是 path 的別名。
若是給 <Switch> 提供一個 location 屬性，它將覆蓋匹配的子元素上的 location 屬性。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/users" component={Users} />
  <Redirect from="/accounts" to="/users" />
  <Route component={NoMatch} />
</Switch>

withRouter

您能夠經過withRouter高階組件訪問歷史對象的屬性和最接近的<Route>的匹配。隨着路由每次路由改變時，路由器會從新渲染其組件，路徑與<路徑>渲染道具：{match，location，history}相同。