新的React Router 從 React 汲取了很多思想和理念，它所提供的路由都可以看成是一個(gè)組件。

本次升級的主要變更有：

• 聲明式 Declarative
• 可組合 Composability

React Router V4 基于 Lerna 管理多個(gè) Repository。在此代碼庫包括：

react-router： React Router 核心
react-router-dom： 用于 DOM 綁定的 React Router
react-router-native： 用于 React Native 的 React Router
react-router-redux： React Router 和 Redux 的集成
react-router-config： 靜態(tài)路由配置幫助助手

在代碼中該引用哪一個(gè)

上面有那么多個(gè)，我們應(yīng)該在代碼中引入哪一個(gè)?
在代碼中我們引入react-router-dom即可，因?yàn)?code>react-router-dom 比 react-router多了<BrowserRouter>,<HashRouter>,<Link>,<NavLink>等一些DOM 類組件，直接引入這個(gè)比較方便使用。

新的react-router和以前的用法有什么區(qū)別

<Router>

Router是所有路由組件共用的底層接口，一般我們的應(yīng)用并不會使用這個(gè)接口，而是使用高級的路由：
<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>

以前的用法可以在<Router>中使用多個(gè)<Route>，如下所示：

render((
  <Router>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

但在最新的版本中，會出如下的錯(cuò)誤：

render((
    <Router>
        <div>
          <Route path="/" component={App}/>
          <Route path="/repos" component={Repos}/>
          <Route path="/about" component={About}/>
        </div>
    </Router>
), document.getElementById('app'))

<Router>的引入方式

下面的三種方式都可以；

import {BrowserRouter as Router} from 'react-router-dom'
import Router from 'react-router-dom/BrowserRouter'
import { BrowserRouter } from 'react-router-dom'

<Route>

Route組件主要的作用就是當(dāng)匹配路由的path時(shí)，渲染某些UI。

有3種方法來渲染內(nèi)容·：

• < Route component>
  只有在地址匹配的時(shí)候React的組件才會被渲染，路由會根據(jù)指定的組件使用React.createElement來創(chuàng)建一個(gè)新的React element

  <Route path="/user/:username" component={User}/>
   const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
  }
  

• < Route render>
  使用render屬性，你可以選擇傳一個(gè)在地址匹配時(shí)被調(diào)用的函數(shù)，而不會新創(chuàng)建一個(gè)像component一樣的React element

  <Route exact path="/topics" render={() => (
       <h3>Please select a topic.</h3>
  )}/>
  

• < Route children>
  有時(shí)候你可能想不管地址是否匹配都渲染一些內(nèi)容，這種情況你可以使用children屬性。它與render屬性的工作方式基本一樣。

   <Route path="aaa" children={() => (
       <h3>hello children</h3>
   )}/>
  

這三種渲染方法都會獲得相同的三個(gè)的屬性：

• match
  match 對象包含了 <Route path> 如何與URL匹配的信息。match 對象包含以下屬性：
  • params -（ object 類型）即路徑參數(shù)，通過解析URL中動態(tài)的部分獲得的鍵值對。
  • isExact - 當(dāng)為 true 時(shí)，整個(gè)URL都需要匹配。
  • path -（ string 類型）用來做匹配的路徑格式。在需要嵌套 <Route> 的時(shí)候用到。
  • url -（ string 類型）URL匹配的部分，在需要嵌套 <Link> 的時(shí)候會用到。
• location
  Location 是指你當(dāng)前的位置，下一步打算去的位置，或是你之前所在的位置
• history

一個(gè)例子

更多的用法，待續(xù)......

參考
https://github.com/react-translate-team/react-router-CN
初探 React Router 4.0
http://m.itdecent.cn/p/e3adc9b5f75c
React Router V4 系列專欄（一）
https://github.com/iuap-design/blog/issues/176
React Router v4 入坑指南
http://www.codezhan.com/Front-end/2017/0707/8293.html
http://m.itdecent.cn/p/27ee7df4ccc1