React Router小結

1. 什麼是React Router

一個基於 React 之上的強大路由庫，官方的示例庫有詳細的使用介紹。

2. 為什麼要用React Router

如果不使用React Router，元件之間的巢狀，會使URL變得複雜，為了讓我們的 URL 解析變得更智慧，我們需要編寫很多程式碼來實現指定 URL 應該渲染哪一個巢狀的 UI 元件分支。

而React Router 知道如何為我們搭建巢狀的 UI，因此我們不用手動找出需要渲染哪些元件。

3. 使用方式

• 路由巢狀

<Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/repos" component={Repos}/>
      <Route path="/about" component={About}/>
    </Route>
</Router>

App元件要寫成下面的樣子

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    </div>
  }
})

• IndexRouter

<Router>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="accounts" component={Accounts}/>
      <Route path="statements" component={Statements}/>
    </Route>
</Router>

進入到根目錄，載入Home元件

• Link

<Link to="/home">Home</Link>

• 為Link設定觸發狀態
  • 設定activeClassName屬性，新增一個class，在裡面設定屬性
  • 設定activeStyle屬性，直接定義樣式

<Link to="/about" activeClassName="active">About</Link>
<Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link>

• browserHistory and hashHistory
  使用時需要引入

import { browserHistory, hashHistory } from 'react-router'

<Router history={browserHistory}>
     <Route path="accounts" component={Accounts}/>
</Router>

在Accounts元件中使用 browserHistory.push("/") 可跳轉到根目錄。

<Router history={hashHistory}>
    <Route path="accounts" component={Accounts}/>
</Router>

• 跳轉前確認 demo

import React from 'react'
import {Link, Lifecycle} from 'react-router'
export default React.createClass({
    mixins: [Lifecycle],
    routerWillLeave(nextLocation) {
        if (1){
            return '跳轉前確認'
        }
    },
    render() {
        return (
            <div>
                <h1>React Router 跳轉前確認</h1>
                <ul role="nav">
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/repos">Repos</Link></li>
                </ul>
            </div>
        )
    }
})

參考：
http://www.ruanyifeng.com/blog/2016/05/react_router.html
https://react-guide.github.io/react-router-cn/docs/Introduction.html