(1) 安裝

• React Router被拆分成三個包：react-router,react-router-dom和react-router-native。react-router提供核心的路由組件與函數。其余兩個則提供運行環境（即瀏覽器與react-native）所需的特定組件。
• 進行網站（將會運行在瀏覽器環境中）構建，我們應當安裝react-router-dom。react-router-dom暴露出react-router中暴露的對象與方法，因此你只需要安裝并引用react-router-dom即可。

cnpm install react-router-dom --save

(2) 引入

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

(3)使用

• 知識點：
• (1) 當路由地址匹配成功后，會創建一個含有以下屬性的match對象：
  url ：與當前location路徑名所匹配部分
  path?：路由的地址
  isExact ：path 是否等于 pathname
  params?：從path-to-regexp獲取的路徑中取出的值都被包含在這個對象中

-(2) exact嚴格模式，表示只匹配當前的路徑。

<Route exact path={ match.url } render={ () => ( <h3>請點擊內容查看詳情</h3>  ) }></Route>

（上）加了exact

（下）沒加exact

完整代碼：

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'


const App = () => (
    <Router>
        <div>
            <ul>
                {/*Link的url需要匹配到Route的path,才會渲染對應的組件*/}
                <li> <Link to="/ui">ui站酷</Link> </li>
                <li> <Link to="/code">前端簡書</Link> </li>
                <li> <Link to="/dao">省局到</Link> </li>
            </ul>

            <hr/>

            <Route path="/ui" component={ Ui }/>
            <Route path="/code" component={ Code }/>
            <Route path="/dao" component={ Dao }/>
        </div>
    </Router>
)

const Ui = () => (
    <div>
        <h2>
            這里是ui路由的內容
        </h2>
    </div>
)

const Code = () => (
    <div>
        <h2>
            這里是前段路由的內容
        </h2>
    </div>
)

const Dao = ({match}) => {
    console.log(match)
    return(
        <div>
            <h2>這里是勝局到的內容</h2>
            <ul>
                <li> <Link to="/dao/1">省局到內容1</Link> </li>
                <li> <Link to="/dao/2">省局到內容2</Link> </li>
                <li> <Link to="/dao/333">省局到內容3</Link> </li>
                <li> <Link to={ `${match.url}/4`}>省局到內容4</Link> </li>
            </ul>
            <hr/>

            {/*<Route path="/dao/1" render={ () => (<h3>11111111111</h3>)}></Route>*/}
            {/*<Route path="/dao/2" render={ () => (<h3>2222222222</h3>)}></Route>*/}
            {/*<Route path="/dao/3" render={ () => (<h3>333333333</h3>)}></Route>*/}
            <Route path={ `${match.url}/:aa`} component={ Match }></Route>
            {/*這里的:aa表示的是傳參，傳入aa這個參數變量，獲取所有/dao/后面的路徑*/}
            <Route exact path={ match.url } render={ () => ( <h3>請點擊內容查看詳情</h3>  ) }></Route>
        </div>
    )
}
// 下面的match是子路由匹配成功的時候的match,與上面的（父）路由匹配成功的match不一樣
const Match = ({match}) => {
    console.log(match)
    return(
        <div>
            <h3>{match.params.aa}</h3>
        </div>
    )
}


export default App

QQ截圖20170826024224.png

(官網)https://reacttraining.com/react-router/web/example/basic
http://blog.csdn.net/github_38095237/article/details/70157021?winzoom=1
(嵌套路由)http://www.menvscode.com/detail/5957cdc941d2a6025bbe0446
(簡單入門)https://segmentfault.com/a/1190000010174260