## 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
