## react-router
1、安裝`react-router-dom`。
`npm install --save react-router-dom`
這里也能直接安裝`react-router`，兩個只要安裝其中一個就可以了。
2、新建`router`文件夾和組件。
~~~
cd src
mkdir router && touch router/router.js
~~~
3、根據[react-router文檔](http://reacttraining.cn/web/guides/quick-start)編寫一個最基本的`router.js`，包含兩個頁面`home` 和 `page`。
`src/router/router.js`
~~~
import React from 'react'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import Home from '../pages/Home/Home'
import Page from '../pages/Page/Page'
export default () => (
<Router>
<div>
<ul>
<li><Link to="/">首頁</Link></li>
<li><Link to="/page">Page</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/page" component={Page} />
</Switch>
</div>
</Router>
// 相當于return 一個（組件）
)
~~~
4、新建路由頁面文件夾并新建兩個頁面`Home`和`Page`。
~~~
cd src
mkdir pages
cd src/pages
mkdir Home && touch Home/Home.js
mkdir Page && touch Page/Page.js
~~~
5、填充內容：
`src/pages/Home/Home.js`
~~~
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return <h1>This is Home</h1>
}
}
~~~
`src/pages/Page/Page.js`
~~~
import React, { Component } from 'react'
export default class Page extends Component {
render() {
return <h1>This is Page</h1>
}
}
~~~
6、現在有路由和路由頁面了，我們在入口文件`src/index.js`引入`Router`。
修改`src/index.js`
~~~
import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router/router'
ReactDOM.render(<Router />, document.getElementById('app))
~~~
7、現在執行打包命令`npm run work`，打開`index.html`看效果。
!!!發現居然有`bug!!!`我們點擊首頁和Page都沒有反應。下面我們來解決一下。
因為路由需要搭配Web服務器使用，用純路徑訪問是不會有作用的，我們需要配置一個簡單的Web服務器，指向`index.html`
有下面兩種方法可以實現：
1. Nginx、Apache、IIS等配置啟動一個簡單的Web服務器。
2. 使用webpack-dev-server來配置啟動Web服務器。
參考地址
http://www.jianshu.com/p/e3adc9b5f75c
http://reacttraining.cn/web/guides/quick-start
