<Route>組件有如下屬性：

• path（string）: 路由匹配路徑。（沒有path屬性的Route 總是會 匹配）；
• exact（bool）：為true時，則要求路徑與location.pathname必須完全匹配；
• strict（bool）：true的時候，有結尾斜線的路徑只能匹配有斜線的location.pathname；

再次奉上兩個鮮活的例子：

exact配置：

strict配置：

<Link>

和之前版本沒太大區別，重點看下組件屬性：

• to（string/object）：要跳轉的路徑或地址；
• replace（bool）：為 true 時，點擊鏈接後將使用新地址替換掉訪問歷史記錄裏面的原地址；為 false 時，點擊鏈接後將在原有訪問歷史記錄的基礎上添加一個新的紀錄。默認為 false；

示例如下：

// Link組件示例

// to為string
<Link to="/about">關於</Link>

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

// replace 
<Link to="/courses" replace />
 

<NavLink>

<NavLink>是<Link> 的一個特定版本, 會在匹配上當前 URL 的時候會給已經渲染的元素添加樣式參數，組件屬性：

• activeClassName（string）：設置選中樣式，默認值為 active；
• activeStyle（object）：當元素被選中時, 為此元素添加樣式；
• exact（bool）：為 true 時, 只有當地址完全匹配 class 和 style 才會應用；
• strict（bool）：為 true 時，在確定位置是否與當前 URL 匹配時，將考慮位置 pathname 後的斜線；
• isActive（func）：判斷鏈接是否激活的額外邏輯的功能；

從這裏我們也可以看出，新版本的路由在組件化上面確實下了不少功夫，來看看NavLink的使用示例：

// activeClassName選中時樣式為selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

// 選中時樣式為activeStyle的樣式設置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: ‘bold‘,
    color: ‘red‘
   }}
>FAQs</NavLink>

// 當event id為奇數的時候，激活鏈接
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>

<Switch>

該組件用來渲染匹配地址的第一個<Route>或者<Redirect>。那麽它與使用一堆route又有什麽區別呢？

<Switch>的獨特之處是獨它僅僅渲染一個路由。相反地，每一個包含匹配地址(location)的<Route>都會被渲染。思考下面的代碼：

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

如果現在的URL是/about，那麽<About>, <User>, 還有<NoMatch>都會被渲染，因為它們都與路徑(path)匹配。這種設計，允許我們以多種方式將多個<Route>組合到我們的應用程序中，例如側欄(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶爾我們只想選擇一個<Route>來渲染。如果我們現在處於/about，我們也不希望匹配/:user（或者顯示我們的 “404” 頁面 ）。以下是使用 Switch 的方法來實現：

<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 exact屬性含義