ReactRouter4.0 配置指南

<Router>

在4.0以前版本的 API 中，<Router> 組件的 children 只能是 React Router 提供的各類組件，如<Route>、<IndexRoute>、<Redirect>等。而在 React Router 4 中，你能夠將各類組件及標籤放進 <Router>組件中，他的角色也更像是 Redux 中的 <Provider>。不一樣的是<Provider>是用來保持與 store 的更新，而<Router>是用來保持與 location 的同步。示例以下：

// 示例1
<Router>
    <div>
      <ul>
        <li><Link to="/">首頁</Link></li>
        <li><Link to="/about">關於</Link></li>
        <li><Link to="/topics">主題列表</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>

Router是全部路由組件共用的底層接口，通常咱們的應用並不會使用這個接口，而是使用高級的路由：

• <BrowserRouter>：使用 HTML5 提供的 history API 來保持 UI 和 URL 的同步；
• <HashRouter>：使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL 的同步；
• <MemoryRouter>：能在內存保存你 「URL」 的歷史紀錄(並無對地址欄讀寫)；
• <NativeRouter>：爲使用React Native提供路由支持；
• <StaticRouter>：從不會改變地址；

注意：這裏<Router>組件下只容許存在一個子元素，如存在多個則會報錯。

反面典型在這裏：

// 示例2 在沒有<div>包裹下，會拋出異常信息
<Router>
      <ul>
        <li><Link to="/">首頁</Link></li>
        <li><Link to="/about">關於</Link></li>
        <li><Link to="/topics">主題列表</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
  </Router>

<Route>

Route組件主要的做用就是當一個location匹配路由的path時，渲染某些UI。示例以下：

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

// 若是應用的地址是/,那麼相應的UI會相似這個樣子：
<div>
  <Home/>
</div>

// 若是應用的地址是/news,那麼相應的UI就會成爲這個樣子：
<div>
  <NewsFeed/>
</div>

<Route>組件有以下屬性：

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

exact配置：

路徑    location.pathname    exact    是否匹配
/one    /one/two    true    否
/one    /one/two    false    是

strict配置：

路徑    location.pathname    strict    是否匹配
/one/    /one    true    否
/one/    /one/    true    是
/one/    /one/two    true    是

同時，新版的路由爲<Route>提供了三種渲染內容的方法：

• <Route component>：在地址匹配的時候React的組件纔會被渲染，route props也會隨着一塊兒被渲染；
• <Route render>：這種方式對於內聯渲染和包裝組件卻不引發意料以外的從新掛載特別方便；
• <Route children>：與render屬性的工做方式基本同樣，除了它是無論地址匹配與否都會被調用；

第一種和以前同樣，這裏咱們重點看下<Route render>的渲染方式：

// 行內渲染示例
<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>的優先級要比<Route render>高，因此不要在同一個<Route>中同時使用這兩個屬性。

<Link>

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

// 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）：判斷連接是否激活的額外邏輯的功能；

// 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>將被渲染。