<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 的正確格式是前面有一個前導(dǎo)斜杠芝加，但不能有尾部斜杠。
<BrowserRouter basename="/calendar">
<Link to="/today" />
</BrowserRouter>
上例中的 <Link> 最終將被呈現(xiàn)為：
<a href="/calendar/today" />
forceRefresh: bool
如果為 true 射窒，在導(dǎo)航的過程中整個頁面將會刷新藏杖。一般情況下将塑，只有在不支持 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 時来吩，會使用默認(rèn)的 confirm 函數(shù)彈出一個提示开财，用戶點擊確定后才進行導(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)的單個子元素（組件）历葛。
<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ù)僅用于支持舊式（低版本）瀏覽器，因此對于一些新式瀏覽器讼育，我們鼓勵你使用<BrowserHistory>代替帐姻。
basename: string
所有位置的基準(zhǔn) URL。basename 的正確格式是前面有一個前導(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- 后面跟一個斜杠，例如 #/ 和 #/sunshine/lollipops -
noslash- 后面沒有斜杠蹲缠，例如 # 和 #sunshine/lollipops -
hashbang- Google 風(fēng)格的 ajax crawlable棺克，例如 #!/ 和 #!/sunshine/lollipops
默認(rèn)為 slash。
children: node
要呈現(xiàn)的單個子元素（組件）线定。
<Link>
為你的應(yīng)用提供聲明式的娜谊、可訪問的導(dǎo)航鏈接。
import { Link } from 'react-router-dom';
<Link to="/about">About</Link>
to: string
一個字符串形式的鏈接地址渔肩，通過 pathname因俐、search 和 hash 屬性創(chuàng)建拇惋。
<Link to='/courses?sort=name' />
to: object
一個對象形式的鏈接地址周偎，可以具有以下任何屬性：
-
pathname- 要鏈接到的路徑 -
search- 查詢參數(shù) -
hash- URL 中的 hash抹剩，例如 #the-hash -
state- 存儲到 location 中的額外狀態(tài)數(shù)據(jù)
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: {
fromDashboard: true
}
}} />
replace: bool
當(dāng)設(shè)置為 true 時，點擊鏈接后將替換歷史堆棧中的當(dāng)前條目蓉坎，而不是添加新條目澳眷。默認(rèn)為 false。
<Link to="/courses" replace />
innerRef: func
允許訪問組件的底層引用蛉艾。
const refCallback = node => {
// node 指向最終掛載的 DOM 元素钳踊，在卸載時為 null
}
<Link to="/" innerRef={refCallback} />
others
你還可以傳遞一些其它屬性，例如 title勿侯、id 或 className 等拓瞪。
<Link to="/" className="nav" title="a title">About</Link>
<NavLink>
一個特殊版本的 <Link>，它會在與當(dāng)前 URL 匹配時為其呈現(xiàn)元素添加樣式屬性助琐。
import { NavLink } from 'react-router-dom';
<NavLink to="/about">About</NavLink>
activeClassName: string
當(dāng)元素處于激活狀態(tài)時應(yīng)用的類祭埂，默認(rèn)為 active。它將與 className 屬性一起使用兵钮。
<NavLink to="/faq" activeClassName="selected">FAQs</NavLink>
activeStyle: object
當(dāng)元素處于激活狀態(tài)時應(yīng)用的樣式蛆橡。
const activeStyle = {
fontWeight: 'bold',
color: 'red'
};
<NavLink to="/faq" activeStyle={activeStyle}>FAQs</NavLink>
exact: bool
如果為 true，則只有在位置完全匹配時才應(yīng)用激活類/樣式掘譬。
<NavLink exact to="/profile">Profile</NavLink>
strict: bool
如果為 true泰演，則在確定位置是否與當(dāng)前 URL 匹配時，將考慮位置的路徑名后面的斜杠葱轩。有關(guān)更多信息睦焕，請參閱 <Route strict> 文檔。
<NavLink strict to="/events/">Events</NavLink>
isActive: func
添加額外邏輯以確定鏈接是否處于激活狀態(tài)的函數(shù)靴拱。如果你要做的不僅僅是驗證鏈接的路徑名與當(dāng)前 URL 的路徑名相匹配复亏，那么應(yīng)該使用它。
// 只有當(dāng)事件 id 為奇數(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）缭嫡。你也可以傳遞一個不同的位置進行比較缔御。
<Prompt>
用于在位置跳轉(zhuǎn)之前給予用戶一些確認(rèn)信息。當(dāng)你的應(yīng)用程序進入一個應(yīng)該阻止用戶導(dǎo)航的狀態(tài)時（比如表單只填寫了一半）妇蛀，彈出一個提示耕突。
import { Prompt } from 'react-router-dom';
<Prompt
when={formIsHalfFilledOut}
message="你確定要離開當(dāng)前頁面嗎？"
/>
message: string
當(dāng)用戶試圖離開某個位置時彈出的提示信息评架。
<Prompt message="你確定要離開當(dāng)前頁面嗎眷茁？" />
message: func
將在用戶試圖導(dǎo)航到下一個位置時調(diào)用。需要返回一個字符串以向用戶顯示提示纵诞，或者返回 true 以允許直接跳轉(zhuǎn)上祈。
<Prompt message={location => {
const isApp = location.pathname.startsWith('/app');
return isApp ? `你確定要跳轉(zhuǎn)到${location.pathname}嗎？` : true;
}} />
譯注：上例中的
location對象指的是下一個位置（即用戶想要跳轉(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時，會彈出提示信息窒悔。如果為false則不會彈出呜袁。見阻止導(dǎo)航示例。
<Prompt when={true} message="你確定要離開當(dāng)前頁面嗎简珠？" />
<MemoryRouter>
將 URL 的歷史記錄保存在內(nèi)存中的 <Router>（不讀取或?qū)懭氲刂窓冢└倒选Ｔ跍y試和非瀏覽器環(huán)境中很有用，例如 React Native北救。
import { MemoryRouter } from 'react-router-dom';
<MemoryRouter>
<App />
</MemoryRouter>
initialEntries: array
歷史堆棧中的一系列位置信息荐操。這些可能是帶有 {pathname, search, hash, state} 的完整位置對象或簡單的字符串 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> 一起使用時，你必須使用此選項攘宙。
keyLength: number
location.key 的長度屯耸，默認(rèn)為 6。
children: node
要呈現(xiàn)的單個子元素（組件）蹭劈。
<Redirect>
使用 <Redirect> 會導(dǎo)航到一個新的位置疗绣。新的位置將覆蓋歷史堆棧中的當(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 對象可以在重定向到的組件中通過 this.props.location.state 進行訪問料仗。而 referrer 鍵（不是特殊名稱）將通過路徑名 /login 指向的登錄組件中的 this.props.location.state.referrer 進行訪問湾盗。
push: bool
如果為 true，重定向會將新的位置推入歷史記錄立轧，而不是替換當(dāng)前條目格粪。
<Redirect push to="/somewhere/else" />
from: string
要從中進行重定向的路徑名躏吊，可以是 path-to-regexp 能夠理解的任何有效的 URL 路徑。所有匹配的 URL 參數(shù)都會提供給 to帐萎，必須包含在 to 中用到的所有參數(shù)比伏，to 未使用的其它參數(shù)將被忽略。
只能在 <Switch> 組件內(nèi)使用 <Redirect from>吓肋，以匹配一個位置。有關(guān)更多細(xì)節(jié)瑰艘，請參閱 <Switch children>是鬼。
<Switch>
<Redirect from='/old-path' to='/new-path' />
<Route path='/new-path' component={Place} />
</Switch>
// 根據(jù)匹配參數(shù)進行重定向
<Switch>
<Redirect from='/users/:id' to='/users/profile/:id' />
<Route path='/users/profile/:id' component={Profile} />
</Switch>
exact: bool
完全匹配，相當(dāng)于 Route.exact紫新。
strict: bool
嚴(yán)格匹配均蜜，相當(dāng)于 Route.strict。
<Route>
<Route> 可能是 React Router 中最重要的組件芒率，它可以幫助你理解和學(xué)習(xí)如何更好的使用 React Router囤耳。它最基本的職責(zé)是在其 path 屬性與某個 location 匹配時呈現(xiàn)一些 UI。
請考慮以下代碼：
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)將會是：
<div>
<Home />
<!-- react-empty: 2 -->
</div>
或者充择，如果應(yīng)用程序的位置是 /news，那么 UI 的層次結(jié)構(gòu)將會是：
<div>
<!-- react-empty: 1 -->
<News />
</div>
其中 react-empty 注釋只是 React 空渲染的實現(xiàn)細(xì)節(jié)匪蟀。但對于我們的目的而言椎麦，它是有啟發(fā)性的。路由始終在技術(shù)上被“渲染”材彪，即使它的渲染為空观挎。只要應(yīng)用程序的位置匹配 <Route> 的 path，你的組件就會被渲染段化。
Route render methods
使用 <Route> 渲染一些內(nèi)容有以下三種方式：
在不同的情況下使用不同的方式嘁捷。在指定的 <Route> 中，你應(yīng)該只使用其中的一種显熏。請參閱下面的解釋雄嚣，了解為什么有三個選項。大多數(shù)情況下你會使用 component喘蟆。
Route props
三種渲染方式都將提供相同的三個路由屬性：
component
指定只有當(dāng)位置匹配時才會渲染的 React 組件现诀，該組件會接收 route props 作為屬性。
const User = ({ match }) => {
return <h1>Hello {match.params.username}!</h1>
}
<Route path="/user/:username" component={User} />
當(dāng)你使用 component（而不是 render 或 children）時履肃，Router 將根據(jù)指定的組件仔沿，使用 React.createElement 創(chuàng)建一個新的 React 元素。這意味著尺棋，如果你向 component 提供一個內(nèi)聯(lián)函數(shù)封锉，那么每次渲染都會創(chuàng)建一個新組件绵跷。這將導(dǎo)致現(xiàn)有組件的卸載和新組件的安裝成福，而不是僅僅更新現(xiàn)有組件碾局。當(dāng)使用內(nèi)聯(lián)函數(shù)進行內(nèi)聯(lián)渲染時，請使用 render 或 children（見下文）像啼。
render: func
使用 render 可以方便地進行內(nèi)聯(lián)渲染和包裝，而無需進行上文解釋的不必要的組件重裝潭苞。
你可以傳入一個函數(shù)忽冻，以在位置匹配時調(diào)用，而不是使用 component 創(chuàng)建一個新的 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>，因此不要在同一個<Route>中同時使用兩者蝗碎。
children: func
有時候不論 path 是否匹配位置湖笨，你都想渲染一些內(nèi)容。在這種情況下蹦骑，你可以使用 children 屬性赶么。除了不論是否匹配它都會被調(diào)用以外，它的工作原理與 render 完全一樣脊串。
children 渲染方式接收所有與 component 和 render 方式相同的 route props辫呻，除非路由與 URL 不匹配，不匹配時 match 為 null琼锋。這允許你可以根據(jù)路由是否匹配動態(tài)地調(diào)整用戶界面放闺。如下所示，如果路由匹配缕坎，我們將添加一個激活類：
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>優(yōu)先于<Route children>，因此不要在同一個<Route>中同時使用多個谜叹。
path: string
可以是 path-to-regexp 能夠理解的任何有效的 URL 路徑匾寝。
<Route path="/users/:id" component={User} />
沒有定義 path 的 <Route> 總是會被匹配。
exact: bool
如果為 true荷腊，則只有在 path 完全匹配 location.pathname 時才匹配艳悔。
<Route exact path="/one" component={OneComponent} />
[圖片上傳失敗...(image-d86957-1526486128879)]
strict: bool
如果為 true，則具有尾部斜杠的 path 僅與具有尾部斜杠的 location.pathname 匹配女仰。當(dāng) location.pathname 中有附加的 URL 片段時猜年，strict 就沒有效果了抡锈。
<Route strict path="/one/" component={OneComponent} />
[圖片上傳失敗...(image-4289b9-1526486128879)]
警告：可以使用
strict來強制規(guī)定location.pathname不能具有尾部斜杠，但是為了做到這一點乔外，strict和exact必須都是true床三。
[圖片上傳失敗...(image-e932c7-1526486128879)]
location: object
一般情況下，<Route> 嘗試將其 path 與當(dāng)前歷史位置（通常是當(dāng)前的瀏覽器 URL）進行匹配杨幼。但是撇簿，也可以傳遞具有不同路徑名的位置進行匹配。
當(dāng)你需要將 <Route> 與當(dāng)前歷史位置以外的 location 進行匹配時差购，此功能非常有用四瘫。如過渡動畫示例中所示。
如果一個 <Route> 被包含在一個 <Switch> 中歹撒，并且需要匹配的位置（或當(dāng)前歷史位置）傳遞給了 <Switch>莲组，那么傳遞給 <Route> 的 location 將被 <Switch> 所使用的 location 覆蓋诊胞。
sensitive: bool
如果為 true暖夭，進行匹配時將區(qū)分大小寫。
<Route sensitive path="/one" component={OneComponent} />
[圖片上傳失敗...(image-2be4d5-1526486128879)]
<Router>
所有 Router 組件的通用低階接口撵孤。通常情況下迈着，應(yīng)用程序只會使用其中一個高階 Router：
使用低階 <Router> 的最常見用例是同步一個自定義歷史記錄與一個狀態(tài)管理庫，比如 Redux 或 Mobx邪码。請注意裕菠，將 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)航的歷史記錄對象奴潘。
import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();
<Router history={customHistory} />
children: node
要呈現(xiàn)的單個子元素（組件）。
<Router>
<App />
</Router>
<StaticRouter>
一個永遠(yuǎn)不會改變位置的 <Router>影钉。
這在服務(wù)器端渲染場景中非常有用画髓，因為用戶實際上沒有點擊，所以位置實際上并未發(fā)生變化平委。因此奈虾，名稱是 static（靜態(tài)的）。當(dāng)你只需要插入一個位置廉赔，并在渲染輸出上作出斷言以便進行簡單測試時肉微，它也很有用。
以下是一個示例蜡塌，node server 為 <Redirect> 發(fā)送 302 狀態(tài)碼碉纳，并為其它請求發(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) => {
// 這個 context 對象包含了渲染的結(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 的正確格式是前面有一個前導(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
一個形如 {pathname, search, hash, state} 的位置對象躁劣。
<StaticRouter location={{ pathname: '/bubblegum' }}>
<App />
</StaticRouter>
context: object
一個普通的 JavaScript 對象。在渲染過程中库菲，組件可以向?qū)ο筇砑訉傩砸源鎯τ嘘P(guān)渲染的信息账忘。
const context = {};
<StaticRouter context={context}>
<App />
</StaticRouter>
當(dāng)一個 <Route> 匹配時，它將把 context 對象傳遞給呈現(xiàn)為 staticContext 的組件熙宇。查看服務(wù)器渲染指南以獲取有關(guān)如何自行完成此操作的更多信息鳖擒。
渲染之后，可以使用這些屬性來配置服務(wù)器的響應(yīng)烫止。
if (context.status === '404') {
// ...
}
children: node
要呈現(xiàn)的單個子元素（組件）蒋荚。
<Switch>
用于渲染與路徑匹配的第一個子 <Route> 或 <Redirect>。
這與僅僅使用一系列 <Route> 有何不同馆蠕？
<Switch> 只會渲染一個路由期升。相反，僅僅定義一系列 <Route> 時互躬，每一個與路徑匹配的 <Route> 都將包含在渲染范圍內(nèi)播赁。考慮如下代碼：
<Route path="/about" component={About} />
<Route path="/:user" component={User} />
<Route component={NoMatch} />
如果 URL 是 /about吼渡，那么 <About>容为、<User> 和 <NoMatch> 將全部渲染，因為它們都與路徑匹配寺酪。這是通過設(shè)計坎背，允許我們以很多方式將 <Route> 組合成我們的應(yīng)用程序，例如側(cè)邊欄和面包屑寄雀、引導(dǎo)標(biāo)簽等得滤。
但是，有時候我們只想選擇一個 <Route> 來呈現(xiàn)咙俩。比如我們在 URL 為 /about 時不想匹配 /:user（或者顯示我們的 404 頁面）耿戚，這該怎么實現(xiàn)呢？以下就是如何使用 <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>
現(xiàn)在阿趁，當(dāng)我們在 /about 路徑時膜蛔，<Switch> 將開始尋找匹配的 <Route>。我們知道脖阵，<Route path="/about" /> 將會被正確匹配皂股，這時 <Switch> 會停止查找匹配項并立即呈現(xiàn) <About>。同樣命黔，如果我們在 /michael 路徑時呜呐，那么 <User> 會呈現(xiàn)就斤。
這對于動畫轉(zhuǎn)換也很有用，因為匹配的 <Route> 與前一個渲染位置相同蘑辑。
<Fade>
<Switch>
{/* 這里只會渲染一個子元素 */}
<Route />
<Route />
</Switch>
</Fade>
<Fade>
<Route />
<Route />
{/* 這里總是會渲染兩個子元素洋机，也有可能是空渲染，這使得轉(zhuǎn)換更加麻煩 */}
</Fade>
location: object
用于匹配子元素而不是當(dāng)前歷史位置（通常是當(dāng)前的瀏覽器 URL）的 location 對象洋魂。
children: node
所有 <Switch> 的子元素都應(yīng)該是 <Route> 或 <Redirect>绷旗。只有第一個匹配當(dāng)前路徑的子元素將被呈現(xiàn)。
<Route> 組件使用 path 屬性進行匹配副砍，而 <Redirect> 組件使用它們的 from 屬性進行匹配衔肢。沒有 path 屬性的 <Route> 或者沒有 from 屬性的 <Redirect> 將始終與當(dāng)前路徑匹配。
當(dāng)在 <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>
