### 页面
`pages` 存放项目相关的页面，每个页面拥有自己的 URL

```
// config Home page URL
<Locations hash>
    <Location href="/home_page_url"/>
    ...
</Locations>
```

### 现有页面及规范
`pages` 目录下的页面按文件夹进行组织, 文件夹的名称全部使用小写，最好用一个单词表示  

该页面目录下必须有一个index.jsx, 作为该页面的入口  

当前页面目录下，可拥有自己的子目录，用于存放自己页面的私有组件，例如

```
--- home
|   |-- index.jsx
|   |
|   |-- style.scss
|   |
|   |-- /details/
|   |   |
|   |   |-- index.jsx
|   |   |
|   |   |-- style.scss
|   |
|   |-- /others/
|
```

### 添加新页面 `Home`

1.  `pages` 目录下 `mkdir home`

2.  新建 `home/index.jsx`

    ```
    export default class Home extends React.Component {
        render() {
            return (
                <div>
                    <h2> This is home page </h2>
                </div>
            )
        }
    }

    ```
3.  修改一下`pages/index.jsx`的配置

    ```
    // import home page in 
    import Home from 'react-proxy!./home'
    import About from 'react-proxy!./about'

    ...

    <Locations hash>
        <Location path="/" handler={Home}/>
        ...
        <Location path="/about" handler={About}/> 
        ...
    </Locations>

    ...

    ```
4.  预览下效果  
    -  `npm start`
    -  访问地址`http://localhost:3000/#/home`


### 页面之间跳转以及参数传递   
1. 各页面路由配置  

    ```
    <Locations hash>
        <Location path="/" handler={Home}/>
        <Location path="/about" handler={About}/>
        <Location path="/messages/:id" handler={Messages}/>
        <Location path="/test" handler={Test}/>
        <NotFound handler={NotFoundPage}/>
    </Locations>
    ```

2.  链接跳转  
  *  不带参数  
    `<Link href="/about">Go to about page </Link>`  
  *  带参数  
    `<Link href="/message" params={{id: 1234}}></Link>`
    
    ```
    // retrieve the id param in constructor, componetDidMount, render ...
    // in message page
    render() {
      let id = this.props.id
    }
    ```
      
### NOTE  

*   `react-proxy!{module_path_to_load}`  

    此处的神秘之处在于 [react-proxy-loader](https://github.com/webpack/react-proxy-loader)，
    它利用了webpack提供的异步模块接口：  

    ```
    module.exports = (callback) => {
        require.ensure([], (require) => {
            callback && callback(require('module_path_to_load')) 
        })
    }
    ```

更多文档  

* [react-router-component](https://github.com/STRML/react-router-component)
* [react-proxy-loader](https://github.com/webpack/react-proxy-loader)