基本組件 (Basic Components)
React Router 提供三種類型組件眷细，分別是路由組件(router components)，路由匹配組件(route matching components)外遇，以及導(dǎo)航組件(navigation components).
你使用以上的任何一個組件都必須要引入一個名為 react-router-dom 的文件
import { BrowserRouter, Route, Link } from 'react-router-dom'
2.1 路由 (Routers)
任何一個核心路由APP（REACT ROUTER APPLICATION）都必須為一個路由組件洛搀。對于web工程扳抽，react-router-dom 文件提供了 <BroswerRouter> 和 <HashRouter> 路由組件。 他們兩個都會為你創(chuàng)建一個專門的 history 對象智哀。一般來講次询，你的服務(wù)器只是一個回應(yīng)請求的服務(wù)器，那么更多使用的是<BroswerRouter>盏触，但如果你的服務(wù)器是靜態(tài)文件服務(wù)器渗蟹，那么你可以使用<HashRouter>
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), holder)
2.2 路由匹配（Route Matching）
我們提供了兩種路由匹配組件，它們分別是：<Route> 和 <Switch>.
import { Route, Switch } from 'react-router-dom'
路由匹配通過比較<Route>組件的PATH屬性和本地路徑的pathname 來完成工作赞辩。當(dāng)一個 <Route> 匹配到對應(yīng)路徑雌芽，他會渲染(render) 對應(yīng)路徑的內(nèi)容，然而當(dāng)它沒有匹配到對應(yīng)路徑是辨嗽，會渲染null世落。 一個沒有提供path屬性的<Route> 將始終被渲染
// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>
你可以在任何你想要根據(jù)位置渲染的內(nèi)容中去包含<Route> 組件。列出并排列多個可能的<Route>組件通常會很有用糟需。 <Switch>組件用于組合一系列<Route>組件屉佳。
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
當(dāng)然 <Switch> 對于組合<Route> 并不是必須的，也就是說我們并不一定需要組合<Route>洲押，但是這是一個非常有用的組件武花。<Switch> 組件會遍歷所有<Route>元素，并且只渲染最先與本地路徑相匹配的<Route>元素杈帐。這對于多個route組件路徑匹配同一個路徑体箕，或者當(dāng)動畫在兩個組件中過度专钉，或者識別到對于本地路徑?jīng)]有路由路徑與之匹配的時候(這時你可以渲染一個 404 組件)會非常有幫助
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
{/* when none of the above match, <NoMatch> will be rendered */}
<Route component={NoMatch}/>
</Switch>
2.3 路由渲染參數(shù)
你可以有三個參數(shù)來選擇你該如何渲染給出的<Route>組件，分別是：component累铅， render跃须， 和 children。 你可以查看 <Route>documentation來了解以上三個參數(shù)的更多信息娃兽，但是在這里菇民， 我們將主要講 component 和 render 方法，因為他們是兩個最主要的方法投储，也是最常用的第练。
component 作用于你想要渲染的已經(jīng)存在的組件(可以是 react.component ，也可以是無狀態(tài)組件(pure function)）玛荞。render 方法提供一個內(nèi)部函數(shù)复旬，當(dāng)你想要對將被渲染的組件
傳入內(nèi)部變量的時候，你需要使用這個方法冲泥。 你不應(yīng)該對component方法傳入內(nèi)部變量，因為component會有兩個多余的方法 unmounts / remounts壁涎。
const Home = () => <div>Home</div>
const App = () => {
const someVariable = true;
return (
<Switch>
{/* these are good */}
<Route exact path='/' component={Home} />
<Route
path='/about'
render={(props) => <About {...props} extra={someVariable} />}
/>
{/* do not do this */}
<Route
path='/contact'
component={(props) => <Contact {...props} extra={someVariable} />}
/>
</Switch>
)
}
2.4 導(dǎo)航
REACT ROUTER 提供<Link>組件凡恍，它在你的app內(nèi)部創(chuàng)建一個鏈接(link)，無論你在哪里渲染了<Linke>怔球，它都會被渲染成html的錨點元素<a>
<Link to='/'>Home</Link>
// <a href='/'>Home</a>
<NavLink> 是一個特殊類型的<Link>嚼酝，當(dāng)該元素被點擊的時候會激活"active"樣式(提供了activeClassName屬性)。
// location = { pathname: '/react' }
<NavLink to='/react' activeClassName='hurray'>React</NavLink>
// <a href='/react' className='hurray'>React</a>
在任何時候竟坛，如果你想要強制導(dǎo)航闽巩，那么你可以渲染一個<Redirect>。當(dāng)一個<Redirect>元素被渲染時担汤，它會根據(jù)該元素下的"to"屬性涎跨，導(dǎo)航到指定路徑。
Redirect to='/login'/>
