在 React Router 中有三種類型的組件：路由器組件，路由匹配組件，導航組件。這些組件都來自於 react-router-dom。

路由器

對於每一個 React Router 應用來說，都應該有一個路由器組件，它們會為應用創建一個專用的 history 對象。針對 Web 項目，react-router-dom 提供了 <BrowserRouter> 和 <HashRouter>。

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

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), holder);
 

具體使用方式參見 BrowserRouter 和 HashRouter。

路由

React Router 提供了兩種路由匹配組件：<Route> 和 <Switch>。

Route 組件

路由匹配是通過比較 <Route> 組件的 path 屬性和當前地址的 pathname 實現的，如果匹配則渲染當前路由組件的內容，如果不匹配則渲染 null。註意：沒有提供 path 屬性的 <Route> 組件將總是匹配。

import { Route } from ‘react-router-dom‘;

// when location = { pathname: ‘/about‘ }
<Route path=‘/about‘ component={About} /> // renders <About/>
<Route path=‘/contact‘ component={Contact} /> // renders null
<Route component={Always} /> // renders <Always/>
 

具體使用方式參見 Route。

Switch 組件

<Switch> 組件用於給 <Route> 組件分組，可以將一組 <Route> 組件嵌套在 <Switch> 組件中。

那麽，<Switch> 組件僅是為了給 <Route> 組件分組而誕生的嗎？我們知道 <Route> 組件通過比較它的 path 屬性和當前地址來判斷是否渲染它的內容，所以就會存在多個 <Route> 匹配成功且都渲染它們內容的情況。為了避免這樣的情況，<Switch> 組件就起了作用，它會叠代當中的 <Route>

import { Switch, Route } from ‘react-router-dom‘;

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

具體使用方式參見 Switch。

導航

React Router 提供了 <Link> 組件用於為應用提供鏈接，當渲染 <Link> 組件的時候，會在應用中渲染為 HTML 的 <a> 標簽。

另外還有一個特殊的 <Link> 組件就是 <NavLink>，如果當前的地址與它的屬性相匹配，它就會使用 "active" 樣式。

任何時候如果您想要強制一個導航，就可以使用 <Redirect> 組件，當它被渲染的時候，就會導航到它的屬性。

<Link to=‘/‘>Home</Link>
// <a href=‘/‘>Home</a>

// location = { pathname: ‘/react‘ }
<NavLink to=‘/react‘ activeClassName=‘hurray‘>React</NavLink>
// <a href=‘/react‘ className=‘hurray‘>React</a>

<Redirect to=‘/login‘/>

具體使用方式參見 Link，NavLink 和 Redirect

React Router 基礎組件一覽