<BrowserRouter>

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

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

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

basename: string

所有位置的基準(zhǔn) URL摊沉。如果你的應(yīng)用程序部署在服務(wù)器的子目錄狐史，則需要將其設(shè)置為子目錄。basename 的正確格式是前面有一個(gè)前導(dǎo)斜杠令境，但不能有尾部斜杠并村。

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

上例中的 <Link> 最終將被呈現(xiàn)為：

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

forceRefresh: bool

如果為 true ，在導(dǎo)航的過程中整個(gè)頁面將會(huì)刷新荚恶。一般情況下姜贡，只有在不支持 HTML5 history API 的瀏覽器中使用此功能试吁。

const supportsHistory = 'pushState' in window.history;

<BrowserRouter forceRefresh={!supportsHistory} />

getUserConfirmation: func

用于確認(rèn)導(dǎo)航的函數(shù)，默認(rèn)使用 window.confirm楼咳。例如熄捍，當(dāng)從 /a 導(dǎo)航至 /b 時(shí)，會(huì)使用默認(rèn)的 confirm 函數(shù)彈出一個(gè)提示母怜，用戶點(diǎn)擊確定后才進(jìn)行導(dǎo)航余耽，否則不做任何處理。譯注：需要配合 <Prompt> 一起使用苹熏。

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

<BrowserRouter getUserConfirmation={getConfirmation} />

keyLength: number

location.key 的長度碟贾，默認(rèn)為 6。

<BrowserRouter keyLength={12} />

children: node

要呈現(xiàn)的單個(gè)子元素（組件）轨域。

<HashRouter>

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

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

<HashRouter>
  <App />
</HashRouter>

注意： 使用 hash 記錄導(dǎo)航歷史不支持 location.key 和 location.state。在以前的版本中疙挺，我們視圖 shim 這種行為扛邑，但是仍有一些問題我們無法解決怜浅。任何依賴此行為的代碼或插件都將無法正常使用铐然。由于該技術(shù)僅用于支持舊式（低版本）瀏覽器，因此對(duì)于一些新式瀏覽器恶座，我們鼓勵(lì)你使用 <BrowserHistory> 代替搀暑。

basename: string

所有位置的基準(zhǔn) URL。basename 的正確格式是前面有一個(gè)前導(dǎo)斜杠跨琳，但不能有尾部斜杠自点。

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

上例中的 <Link> 最終將被呈現(xiàn)為：

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

getUserConfirmation: func

用于確認(rèn)導(dǎo)航的函數(shù)，默認(rèn)使用 window.confirm脉让。

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

<HashRouter getUserConfirmation={getConfirmation} />

hashType: string

window.location.hash 使用的 hash 類型桂敛，有如下幾種：

• slash - 后面跟一個(gè)斜杠，例如 #/ 和 #/sunshine/lollipops
• noslash - 后面沒有斜杠溅潜，例如 # 和 #sunshine/lollipops
• hashbang - Google 風(fēng)格的 ajax crawlable术唬，例如 #!/ 和 #!/sunshine/lollipops

默認(rèn)為 slash。

children: node

要呈現(xiàn)的單個(gè)子元素（組件）滚澜。

<Link>

為你的應(yīng)用提供聲明式的粗仓、可訪問的導(dǎo)航鏈接。

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

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

to: string

一個(gè)字符串形式的鏈接地址，通過 pathname借浊、search 和 hash 屬性創(chuàng)建塘淑。

<Link to='/courses?sort=name' />

to: object

一個(gè)對(duì)象形式的鏈接地址，可以具有以下任何屬性：

• pathname - 要鏈接到的路徑
• search - 查詢參數(shù)
• hash - URL 中的 hash蚂斤，例如 #the-hash
• state - 存儲(chǔ)到 location 中的額外狀態(tài)數(shù)據(jù)

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

replace: bool

當(dāng)設(shè)置為 true 時(shí)存捺，點(diǎn)擊鏈接后將替換歷史堆棧中的當(dāng)前條目，而不是添加新條目曙蒸。默認(rèn)為 false召噩。

<Link to="/courses" replace />

innerRef: func

允許訪問組件的底層引用。

const refCallback = node => {
  // node 指向最終掛載的 DOM 元素逸爵，在卸載時(shí)為 null
}

<Link to="/" innerRef={refCallback} />

others

你還可以傳遞一些其它屬性具滴，例如 title、id 或 className 等师倔。

<Link to="/" className="nav" title="a title">About</Link>

<NavLink>

一個(gè)特殊版本的 <Link>构韵，它會(huì)在與當(dāng)前 URL 匹配時(shí)為其呈現(xiàn)元素添加樣式屬性。

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

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

activeClassName: string

當(dāng)元素處于激活狀態(tài)時(shí)應(yīng)用的類趋艘，默認(rèn)為 active疲恢。它將與 className 屬性一起使用。

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

activeStyle: object

當(dāng)元素處于激活狀態(tài)時(shí)應(yīng)用的樣式瓷胧。

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

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

exact: bool

如果為 true显拳，則只有在位置完全匹配時(shí)才應(yīng)用激活類/樣式。

<NavLink exact to="/profile">Profile</NavLink>

strict: bool

如果為 true搓萧，則在確定位置是否與當(dāng)前 URL 匹配時(shí)杂数，將考慮位置的路徑名后面的斜杠。有關(guān)更多信息瘸洛，請(qǐng)參閱 <Route strict> 文檔揍移。

<NavLink strict to="/events/">Events</NavLink>

isActive: func

添加額外邏輯以確定鏈接是否處于激活狀態(tài)的函數(shù)。如果你要做的不僅僅是驗(yàn)證鏈接的路徑名與當(dāng)前 URL 的路徑名相匹配反肋，那么應(yīng)該使用它那伐。

// 只有當(dāng)事件 id 為奇數(shù)時(shí)才考慮激活
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: object

isActive 默認(rèn)比較當(dāng)前歷史位置（通常是當(dāng)前的瀏覽器 URL）。你也可以傳遞一個(gè)不同的位置進(jìn)行比較石蔗。

<Prompt>

用于在位置跳轉(zhuǎn)之前給予用戶一些確認(rèn)信息罕邀。當(dāng)你的應(yīng)用程序進(jìn)入一個(gè)應(yīng)該阻止用戶導(dǎo)航的狀態(tài)時(shí)（比如表單只填寫了一半），彈出一個(gè)提示养距。

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

<Prompt
  when={formIsHalfFilledOut}
  message="你確定要離開當(dāng)前頁面嗎诉探？"
/>

message: string

當(dāng)用戶試圖離開某個(gè)位置時(shí)彈出的提示信息。

<Prompt message="你確定要離開當(dāng)前頁面嗎铃在？" />

message: func

將在用戶試圖導(dǎo)航到下一個(gè)位置時(shí)調(diào)用阵具。需要返回一個(gè)字符串以向用戶顯示提示碍遍，或者返回 true 以允許直接跳轉(zhuǎn)。

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

  return isApp ? `你確定要跳轉(zhuǎn)到${location.pathname}嗎阳液？` : true;
}} />

譯注：上例中的 location 對(duì)象指的是下一個(gè)位置（即用戶想要跳轉(zhuǎn)到的位置）怕敬。你可以基于它包含的一些信息，判斷是否阻止導(dǎo)航帘皿，或者允許直接跳轉(zhuǎn)东跪。

when: bool

在應(yīng)用程序中，你可以始終渲染 <Prompt> 組件鹰溜，并通過設(shè)置 when={true} 或 when={false} 以阻止或允許相應(yīng)的導(dǎo)航虽填，而不是根據(jù)某些條件來決定是否渲染 <Prompt> 組件。

譯注：when 只有兩種情況曹动，當(dāng)它的值為 true 時(shí)斋日，會(huì)彈出提示信息。如果為 false 則不會(huì)彈出墓陈。見阻止導(dǎo)航示例恶守。

<Prompt when={true} message="你確定要離開當(dāng)前頁面嗎？" />

<MemoryRouter>

將 URL 的歷史記錄保存在內(nèi)存中的 <Router>（不讀取或?qū)懭氲刂窓冢┕北亍Ｔ跍y(cè)試和非瀏覽器環(huán)境中很有用兔港，例如 React Native。

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

<MemoryRouter>
  <App />
</MemoryRouter>

initialEntries: array

歷史堆棧中的一系列位置信息仔拟。這些可能是帶有 {pathname, search, hash, state} 的完整位置對(duì)象或簡單的字符串 URL衫樊。

<MemoryRouter
  initialEntries={[ '/one', '/two', { pathname: '/three' } ]}
  initialIndex={1}
>
  <App/>
</MemoryRouter>

initialIndex: number

initialEntries 數(shù)組中的初始位置索引。

getUserConfirmation: func

用于確認(rèn)導(dǎo)航的函數(shù)利花。當(dāng) <MemoryRouter> 直接與 <Prompt> 一起使用時(shí)科侈，你必須使用此選項(xiàng)。

keyLength: number

location.key 的長度晋被，默認(rèn)為 6兑徘。

children: node

要呈現(xiàn)的單個(gè)子元素（組件）刚盈。

<Redirect>

使用 <Redirect> 會(huì)導(dǎo)航到一個(gè)新的位置羡洛。新的位置將覆蓋歷史堆棧中的當(dāng)前條目，例如服務(wù)器端重定向（HTTP 3xx）藕漱。

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

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

to: string

要重定向到的 URL欲侮，可以是 path-to-regexp 能夠理解的任何有效的 URL 路徑。所有要使用的 URL 參數(shù)必須由 from 提供肋联。

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

to: object

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

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

上例中的 state 對(duì)象可以在重定向到的組件中通過 this.props.location.state 進(jìn)行訪問橄仍。而 referrer 鍵（不是特殊名稱）將通過路徑名 /login 指向的登錄組件中的 this.props.location.state.referrer 進(jìn)行訪問韧涨。

push: bool

如果為 true牍戚，重定向會(huì)將新的位置推入歷史記錄，而不是替換當(dāng)前條目虑粥。

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

from: string

要從中進(jìn)行重定向的路徑名如孝，可以是 path-to-regexp 能夠理解的任何有效的 URL 路徑。所有匹配的 URL 參數(shù)都會(huì)提供給 to娩贷，必須包含在 to 中用到的所有參數(shù)第晰，to 未使用的其它參數(shù)將被忽略。

只能在 <Switch> 組件內(nèi)使用 <Redirect from>彬祖，以匹配一個(gè)位置茁瘦。有關(guān)更多細(xì)節(jié)，請(qǐng)參閱 <Switch children>储笑。

<Switch>
  <Redirect from='/old-path' to='/new-path' />
  <Route path='/new-path' component={Place} />
</Switch>

// 根據(jù)匹配參數(shù)進(jìn)行重定向
<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id' />
  <Route path='/users/profile/:id' component={Profile} />
</Switch>

譯注：經(jīng)過實(shí)踐甜熔，發(fā)現(xiàn)以上“根據(jù)匹配參數(shù)進(jìn)行重定向”的示例存在bug，沒有效果突倍。to 中的 :id 并不會(huì)繼承 from 中的 :id 匹配的值纺非，而是直接作為字符串顯示到瀏覽器地址欄！Ｗ阜健烧颖！

exact: bool

完全匹配，相當(dāng)于 Route.exact窄陡。

strict: bool

嚴(yán)格匹配炕淮，相當(dāng)于 Route.strict。

<Route>

<Route> 可能是 React Router 中最重要的組件跳夭，它可以幫助你理解和學(xué)習(xí)如何更好的使用 React Router涂圆。它最基本的職責(zé)是在其 path 屬性與某個(gè) location 匹配時(shí)呈現(xiàn)一些 UI。

請(qǐng)考慮以下代碼：

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
  <div>
    <Route exact path="/" component={Home} />
    <Route path="/news" component={News} />
  </div>
</Router>

如果應(yīng)用程序的位置是 /币叹，那么 UI 的層次結(jié)構(gòu)將會(huì)是：

<div>
  <Home />
  <!-- react-empty: 2 -->
</div>

或者润歉，如果應(yīng)用程序的位置是 /news，那么 UI 的層次結(jié)構(gòu)將會(huì)是：

<div>
  <!-- react-empty: 1 -->
  <News />
</div>

其中 react-empty 注釋只是 React 空渲染的實(shí)現(xiàn)細(xì)節(jié)颈抚。但對(duì)于我們的目的而言踩衩，它是有啟發(fā)性的。路由始終在技術(shù)上被“渲染”贩汉，即使它的渲染為空驱富。只要應(yīng)用程序的位置匹配 <Route> 的 path，你的組件就會(huì)被渲染匹舞。

Route render methods

使用 <Route> 渲染一些內(nèi)容有以下三種方式：

• <Route component>
• <Route render>
• <Route children>

在不同的情況下使用不同的方式褐鸥。在指定的 <Route> 中，你應(yīng)該只使用其中的一種赐稽。請(qǐng)參閱下面的解釋叫榕，了解為什么有三個(gè)選項(xiàng)浑侥。大多數(shù)情況下你會(huì)使用 component。

Route props

三種渲染方式都將提供相同的三個(gè)路由屬性：

• match
• location
• history

component

指定只有當(dāng)位置匹配時(shí)才會(huì)渲染的 React 組件晰绎，該組件會(huì)接收 route props 作為屬性锭吨。

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

<Route path="/user/:username" component={User} />

當(dāng)你使用 component（而不是 render 或 children）時(shí)，Router 將根據(jù)指定的組件寒匙，使用 React.createElement 創(chuàng)建一個(gè)新的 React 元素零如。這意味著，如果你向 component 提供一個(gè)內(nèi)聯(lián)函數(shù)锄弱，那么每次渲染都會(huì)創(chuàng)建一個(gè)新組件考蕾。這將導(dǎo)致現(xiàn)有組件的卸載和新組件的安裝，而不是僅僅更新現(xiàn)有組件会宪。當(dāng)使用內(nèi)聯(lián)函數(shù)進(jìn)行內(nèi)聯(lián)渲染時(shí)肖卧，請(qǐng)使用 render 或 children（見下文）。

render: func

使用 render 可以方便地進(jìn)行內(nèi)聯(lián)渲染和包裝掸鹅，而無需進(jìn)行上文解釋的不必要的組件重裝塞帐。

你可以傳入一個(gè)函數(shù)，以在位置匹配時(shí)調(diào)用巍沙，而不是使用 component 創(chuàng)建一個(gè)新的 React 元素葵姥。render 渲染方式接收所有與 component 方式相同的 route props。

// 方便的內(nèi)聯(lián)渲染
<Route path="/home" render={() => <div>Home</div>} />

// 包裝
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props} />
    </FadeIn>
  )} />
)

<FadingRoute path="/cool" component={Something} />

警告：<Route component> 優(yōu)先于 <Route render>句携，因此不要在同一個(gè) <Route> 中同時(shí)使用兩者榔幸。

children: func

有時(shí)候不論 path 是否匹配位置，你都想渲染一些內(nèi)容矮嫉。在這種情況下削咆，你可以使用 children 屬性。除了不論是否匹配它都會(huì)被調(diào)用以外蠢笋，它的工作原理與 render 完全一樣拨齐。

children 渲染方式接收所有與 component 和 render 方式相同的 route props，除非路由與 URL 不匹配昨寞，不匹配時(shí) match 為 null瞻惋。這允許你可以根據(jù)路由是否匹配動(dòng)態(tài)地調(diào)整用戶界面。如下所示编矾，如果路由匹配熟史，我們將添加一個(gè)激活類：

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>

這對(duì)動(dòng)畫也很有用：

<Route children={({ match, ...rest }) => (
  {/* Animate 將始終渲染，因此你可以利用生命周期來為其子元素添加進(jìn)出動(dòng)畫 */}
  <Animate>
    {match && <Something {...rest} />}
  </Animate>
)} />

警告：<Route component> 和 <Route render> 優(yōu)先于 <Route children>窄俏，因此不要在同一個(gè) <Route> 中同時(shí)使用多個(gè)。

path: string

可以是 path-to-regexp 能夠理解的任何有效的 URL 路徑碘菜。

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

沒有定義 path 的 <Route> 總是會(huì)被匹配凹蜈。

exact: bool

如果為 true限寞，則只有在 path 完全匹配 location.pathname 時(shí)才匹配。

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

strict: bool

如果為 true仰坦，則具有尾部斜杠的 path 僅與具有尾部斜杠的 location.pathname 匹配履植。當(dāng) location.pathname 中有附加的 URL 片段時(shí)，strict 就沒有效果了悄晃。

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

警告：可以使用 strict 來強(qiáng)制規(guī)定 location.pathname 不能具有尾部斜杠玫霎，但是為了做到這一點(diǎn)，strict 和 exact 必須都是 true妈橄。

location: object

一般情況下庶近，<Route> 嘗試將其 path 與當(dāng)前歷史位置（通常是當(dāng)前的瀏覽器 URL）進(jìn)行匹配。但是眷蚓，也可以傳遞具有不同路徑名的位置進(jìn)行匹配鼻种。

當(dāng)你需要將 <Route> 與當(dāng)前歷史位置以外的 location 進(jìn)行匹配時(shí)，此功能非常有用沙热。如過渡動(dòng)畫示例中所示叉钥。

如果一個(gè) <Route> 被包含在一個(gè) <Switch> 中，并且需要匹配的位置（或當(dāng)前歷史位置）傳遞給了 <Switch>篙贸，那么傳遞給 <Route> 的 location 將被 <Switch> 所使用的 location 覆蓋投队。

sensitive: bool

如果為 true，進(jìn)行匹配時(shí)將區(qū)分大小寫爵川。

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

[圖片上傳失敗...(image-291e9f-1537254791502)]

<Router>

所有 Router 組件的通用低階接口蛾洛。通常情況下，應(yīng)用程序只會(huì)使用其中一個(gè)高階 Router：

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>
• <NativeRouter>
• <StaticRouter>

使用低階 <Router> 的最常見用例是同步一個(gè)自定義歷史記錄與一個(gè)狀態(tài)管理庫雁芙，比如 Redux 或 Mobx轧膘。請(qǐng)注意，將 React Router 和狀態(tài)管理庫一起使用并不是必需的兔甘，它僅用于深度集成谎碍。

import { Router } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

<Router history={history}>
  <App />
</Router>

history: object

用于導(dǎo)航的歷史記錄對(duì)象。

import createBrowserHistory from 'history/createBrowserHistory';

const customHistory = createBrowserHistory();

<Router history={customHistory} />

children: node

要呈現(xiàn)的單個(gè)子元素（組件）洞焙。

<Router>
  <App />
</Router>

<StaticRouter>

一個(gè)永遠(yuǎn)不會(huì)改變位置的 <Router>蟆淀。

這在服務(wù)器端渲染場(chǎng)景中非常有用，因?yàn)橛脩魧?shí)際上沒有點(diǎn)擊澡匪，所以位置實(shí)際上并未發(fā)生變化熔任。因此，名稱是 static（靜態(tài)的）唁情。當(dāng)你只需要插入一個(gè)位置疑苔，并在渲染輸出上作出斷言以便進(jìn)行簡單測(cè)試時(shí)，它也很有用甸鸟。

以下是一個(gè)示例惦费，node server 為 <Redirect> 發(fā)送 302 狀態(tài)碼兵迅，并為其它請(qǐng)求發(fā)送常規(guī) HTML：

import { createServer } from 'http';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router';

createServer((req, res) => {
  // 這個(gè) context 對(duì)象包含了渲染的結(jié)果
  const context = {};

  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  // 如果使用 <Redirect>，context.url 將包含要重定向到的 URL
  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    });
    res.end();
  } else {
    res.write(html);
    res.end();
  }
}).listen(3000);

basename: string

所有位置的基準(zhǔn) URL薪贫。basename 的正確格式是前面有一個(gè)前導(dǎo)斜杠恍箭，但不能有尾部斜杠。

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

上例中的 <Link> 最終將被呈現(xiàn)為：

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

location: string

服務(wù)器收到的 URL瞧省，可能是 node server 上的 req.url扯夭。

<StaticRouter location={req.url}>
  <App />
</StaticRouter>

location: object

一個(gè)形如 {pathname, search, hash, state} 的位置對(duì)象。

<StaticRouter location={{ pathname: '/bubblegum' }}>
  <App />
</StaticRouter>

context: object

一個(gè)普通的 JavaScript 對(duì)象鞍匾。在渲染過程中交洗，組件可以向?qū)ο筇砑訉傩砸源鎯?chǔ)有關(guān)渲染的信息。

const context = {};

<StaticRouter context={context}>
  <App />
</StaticRouter>

當(dāng)一個(gè) <Route> 匹配時(shí)候学，它將把 context 對(duì)象傳遞給呈現(xiàn)為 staticContext 的組件藕筋。查看服務(wù)器渲染指南以獲取有關(guān)如何自行完成此操作的更多信息。

渲染之后梳码，可以使用這些屬性來配置服務(wù)器的響應(yīng)隐圾。

if (context.status === '404') {
  // ...
}

children: node

要呈現(xiàn)的單個(gè)子元素（組件）。

<Switch>

用于渲染與路徑匹配的第一個(gè)子 <Route> 或 <Redirect>掰茶。

這與僅僅使用一系列 <Route> 有何不同暇藏？

<Switch> 只會(huì)渲染一個(gè)路由。相反濒蒋，僅僅定義一系列 <Route> 時(shí)盐碱，每一個(gè)與路徑匹配的 <Route> 都將包含在渲染范圍內(nèi)』铮考慮如下代碼：

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

如果 URL 是 /about瓮顽，那么 <About>、<User> 和 <NoMatch> 將全部渲染围橡，因?yàn)樗鼈兌寂c路徑匹配暖混。這是通過設(shè)計(jì)，允許我們以很多方式將 <Route> 組合成我們的應(yīng)用程序翁授，例如側(cè)邊欄和面包屑拣播、引導(dǎo)標(biāo)簽等。

但是收擦，有時(shí)候我們只想選擇一個(gè) <Route> 來呈現(xiàn)贮配。比如我們?cè)?URL 為 /about 時(shí)不想匹配 /:user（或者顯示我們的 404 頁面），這該怎么實(shí)現(xiàn)呢塞赂？以下就是如何使用 <Switch> 做到這一點(diǎn)：

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>

現(xiàn)在泪勒，當(dāng)我們?cè)?/about 路徑時(shí)，<Switch> 將開始尋找匹配的 <Route>。我們知道酣藻，<Route path="/about" /> 將會(huì)被正確匹配曹洽，這時(shí) <Switch> 會(huì)停止查找匹配項(xiàng)并立即呈現(xiàn) <About>鳍置。同樣辽剧，如果我們?cè)?/michael 路徑時(shí)，那么 <User>會(huì)呈現(xiàn)税产。

這對(duì)于動(dòng)畫轉(zhuǎn)換也很有用怕轿，因?yàn)槠ヅ涞?<Route> 與前一個(gè)渲染位置相同。

<Fade>
  <Switch>
    {/* 這里只會(huì)渲染一個(gè)子元素 */}
    <Route />
    <Route />
  </Switch>
</Fade>

<Fade>
  <Route />
  <Route />
  {/* 這里總是會(huì)渲染兩個(gè)子元素辟拷，也有可能是空渲染撞羽，這使得轉(zhuǎn)換更加麻煩 */}
</Fade>

location: object

用于匹配子元素而不是當(dāng)前歷史位置（通常是當(dāng)前的瀏覽器 URL）的 location 對(duì)象。

children: node

所有 <Switch> 的子元素都應(yīng)該是 <Route> 或 <Redirect>衫冻。只有第一個(gè)匹配當(dāng)前路徑的子元素將被呈現(xiàn)诀紊。

<Route> 組件使用 path 屬性進(jìn)行匹配，而 <Redirect> 組件使用它們的 from 屬性進(jìn)行匹配隅俘。沒有 path 屬性的 <Route> 或者沒有 from 屬性的 <Redirect> 將始終與當(dāng)前路徑匹配邻奠。

當(dāng)在 <Switch> 中包含 <Redirect> 時(shí)，你可以使用任何 <Route> 擁有的路徑匹配屬性：path为居、exact 和 strict碌宴。from 只是 path 的別名。

如果給 <Switch> 提供一個(gè) location 屬性蒙畴，它將覆蓋匹配的子元素上的 location 屬性贰镣。

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