1.引用：react-router還是react-router-dom?

這兩個包這要引用一個就可以了，不同之處在於後者比前者多了類似於<Link>、<BrowerRouter>這樣的DOM元件。

大多數情況下，我們將會引用react-router-dom。如果搭配redux,還需要引用react-router-redux。

2.<Route>元件：當頁面的url地址和<Route>元件的path屬性匹配時就渲染出對應的ui介面。

(1).Route元件自帶三個render method和三個props:

render methods:  

 每種render method都有特殊的應用場景，一個Route元件應該只使用一種render方法，大多數情況下我們會使用component.

   a. render: func

       用於內聯渲染，不會產生重複裝載問題。

<Route path="/home" render={() => <h1>Home</h1} />

// 包裝 組合
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props} />
    </FaseIn>
  )} />
)

<FadingRoute path="/cool" component={Something} />
 

   b. component:

       只有當訪問的地址和path屬性匹配時，這個react component才會被渲染，

       此時元件接受route props(match,props,location).當使用component時，router將使用React.createElement建立

       一個新的react元素。若使用行內函數傳值給component,將產生不必要的重複裝載，對於行內函數，請使用render進行渲染

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

   c. children: func

      有時候你可能只想知道訪問地址是否被匹配，然後改變下別的東西，而不僅僅是對應的頁面。

<ul>
  <ListItemLink to="/somewhere" />
  <ListItemLink to="/somewhere-ele" />
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest} />
    </li>
  )}
)

props:

    a. math:

    b. location:

    c. history:

    所有的渲染方法都將傳入這三個props。

(2).其他props:

path: 有效的url路徑

exact: （是否嚴格匹配）只有path與location.pathname完全匹配時才會渲染

path	location.pathname	exact	matches?
/one	/one/two	        true	no
/one	/one/two	        false	yes

strict:  （對路徑末尾斜槓的匹配） 

path	location.pathname	matches?
/one/	/one	                no
/one/	/one/	                yes
/one/	/one/two	        yes

如果要確保路由沒有末尾斜槓，那麼 strict 和exact 都必須同時為 true！！！

3.<switch>元件：只渲染出第一個與當前訪問地址匹配的 <Route> 或 <Redirect>。

push (boolean) : 若為真，則重定向操作將會把要訪問的地址新增到歷史記錄裡，並且無法回到前一個頁面。

5.<Prompt> : 當用戶離開當前頁面時做出一些提示。

when (bool) : 通過設定一定條件決定是否啟用Prompt。

message (string or func)  :  當用戶離開頁面時，設定的提示資訊或回撥函式（回撥函式接受location物件作為引數）。

6.物件和方法：

history :

        length: 歷史堆疊中的條目數量

        action: 當前動作（push , pop, replace）

        location: 當前位置

            - pathname: url路徑

            - search: url查詢串

            - hash: url中的hash片段

            - state:  特定於位置的狀態

        push(path [, state]): 將新條目推入歷史堆疊

        replace(path [, state]): 替換歷史堆疊上的當前條目

        goBack(): go(-1)

        go(n): 將history中的指標向前移動n

        goForward: go(1)

        block(prompt): 阻止導航

location :

    history 物件是可變的，因為建議從 <Route> 的 prop 裡來獲取 location，而不是從 history.location 直接獲取。

    這樣可以保證 React 在生命週期中的鉤子函式正常執行，例如以下程式碼：

class Comp extends React.Component {
  componentWillReceiveProps(nextProps) {
    // locationChanged
    const locationChanged = nextProps.location !== this.props.location

    // 錯誤方式，locationChanged 永遠為 false，因為history 是可變的
    const locationChanged = nextProps.history.location !== this.props.history.location
  }
}

    location 物件不會發生改變，因此可以在生命週期的回撥函式中使用 location 物件來檢視當前頁面的訪問地址是否

    發生改變。這種技巧在獲取遠端資料以及使用動畫時非常有用。

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // 已經跳轉了！
  }
}

    在以下情境中可以獲取 location 物件：

• 在 Route component 中，以 this.props.location 獲取
• 在 Route render 中，以 ({location}) => () 方式獲取
• 在 Route children 中，以 ({location}) => () 方式獲取
• 在 withRouter 中，以 this.props.location 的方式獲取

match : 包含了Route物件如何與url匹配的資訊。

    params( object ): 通過解析url中動態部分獲得的鍵值對。

    isExact( boolean ): 為true時，整個url都需要匹配。

    path( string ): 用來匹配url的模式。

    url( string ): url匹配的部分。

在以下情境中可以獲取 match 物件

• 在 Route component 中，以 this.props.match獲取
• 在 Route render 中，以 ({match}) => () 方式獲取
• 在 Route children 中，以 ({match}) => () 方式獲取
• 在 withRouter 中，以 this.props.match的方式獲取
• matchPath 的返回值

當一個 Route 沒有 path 時，它會匹配一切路徑。