React-Router

友情提示：本文暫時主要涉及 React Router < 4.0 版本。

React Router 是一個基於 React 強大路由庫，支持嚮應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。

路由配置

React Router 是創建在 history 之上的，提供 3 種 history 形式

• browserHistory
• hashHistory
• createMemoryHistory

一個 history 知道如何去監聽瀏覽器地址欄的變化，並解析URL轉化爲location對象，而後Router使用它匹配到路由，最後正確地渲染對應的組件，同時路由會在渲染時將如下屬性注入組件中：

• history：Router的history對象，eg.: this.props.history.pushState(state, path, query)
• location：當前的的loaction信息
• params：URL的動態字段
• route：渲染組件的路由
• routeParams：路由的動態字段
• children：指向該路由下的子路由，匹配到的子route的元素將被渲染

提供一個示例，僅供參考

/// 若是 route 的路徑是 users/:userId，URL 是 /users/123/portfolios/345
this.props.routeParams 是 {userId: '123'}
this.props.params 是 {userId: '123', portfolioId: 345}

history對象同時提供API方法

• pushState(state, pathname, query) 
• replaceState(state, pathname, query)
• createPath(pathname, query)

在組件中獲取history對象的方法

• this.props.history層層傳遞
• 使用this.context.history訪問

有關history興起的歷程，參見：React Router中的History；

經常使用組件

Link

用於正常的用戶點擊跳轉，對於表單跳轉、點擊按鈕跳轉等操做。

提供兩種方法與React Router對接：

• browserHistory.push

import { browserHistory } from 'react-router'
class MyComp extends React.Component({
  // ...
  handleSubmit(event) {
    event.preventDefault()
    // ... event.target.elements[0].value
    const path = `/repos/${xxx1}/${xxx2}`
    browserHistory.push(path)
  }
})

// 注意，該方法需額外聲明
MyComp.contextTypes = {
  router: React.PropTypes.object
};

• this.context.router.push

class MyComp extends React.Component({
  // ask for `router` from context
  static contextTypes = {
    router: React.PropTypes.object
  }

  handleSubmit(event) {
    // ...
    this.context.router.push(path)
  },
})

以上均是在組件內部導航，若想在組件外導航頁面，只能使用browserHistory對象

// your main file that renders a Router
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'
render(<Router history={browserHistory} routes={routes}/>, node)

// somewhere like a redux/flux action file:
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

其餘組件的相關信息，可參見：Router API 文檔；　　

注意事項

• 版本

React Router 4 較以前的版本有較大改動，務必注意。

在React-Router-4以前版本，若採用路由

<Router history={browserHistory} />

若是開發服務器使用的是 webpack-dev-server，需加上--history-api-fallback參數

$ webpack-dev-server --inline --content-base . --history-api-fallback

避免刷新時報錯。

參考

React-Router 中文簡明教程；官方示例教程 - react-router-tutorial；

Introduction | React Router 中文文檔；

React Router 使用教程-阮一峯；