React系列学习笔记：3.React-router配置

前言

本节我们主要将通过react-router完成路由配置，并采用ducks-modular-redux的方式编写第一个Counter组件，包列表：

• react-router:关于react-router的具体使用可以参考官方文档
• babel-plugin-transform-decorators-legacy支持最es7的(decorator)装饰器语法
• redux及react-redux

添加新的目录

在我们的开发目录下新建components,containers目录及routes.js相关文件,最终目录结构如下（新增加的用*注释）：

components目录：单独组件目录，可以在任意地方调用
containers目录：页面组件目录，该目录下每一个目录都是一个单页
redux目录：采用redux的方法将，所有redux文件的放置目录

|-React-redux-example/
    |-node_modules/                    #包文件
    |-public/                        #静态目录
        |-assets/                    #静态资源生成目录
        |-index.html
    |-src/                            #开发目录
        |-redux/                    *redux目录
            |-middleware/            *redux中间件
            |-modules/                *redux的actions,reducers
                |-counter.js        *Counter的actions,reducer
                |-reducers.js        *redux目录树
            |-create.js
        |-componets/                *单独组件目录
            |-Counter/                *Counter组件
                |-Counter.js
            |-index.js                *所有组件引用
        |-containers/                *页面组件目录
            |-App/                    *APP组件，整个应用顶级路由
                |-App.js
            |-Home/                    *主页组件，'/'根路由默认页面
                |-Home.js
            |-index.js                *所有组织的引用
        |-server.js                    #express服务器文件
        |-app.js                    #client入口文件
        |-routes.js                    *路配置文件
    |-config/                        #配置目录
        |-webpack.dev.js            #webpack开发配置文件
    |-package.json        
    |-README.md
    |-.gitignore                    #git的忽略列表

页面路由

src/containers/App/App.js

这是整个APP的顶层路由页面，所有的路由都会加载这个页面组件，然后根据路由来匹配this.props.children子页面路由

import React,{Component, PropTypes} from 'react'

export default class App extends Component {

  render(){
    return(
      <div>
        <div>App Nav</div>
        <div>{this.props.children}</div>
        <div>App footer</div>
      </div>
    )
  }
}

src/containers/Home/Home.js

主页组件，默认根路由显示的页面

import React,{Component,PropTypes} from 'react'

export default class Home extends Component {

  render(){
    return(
      <div>HomePage</div>
    )
  }
}

src/containers/index.js

集中导出组件，方便引用

export App from './App/App';
export Home from './Home/Home';

src/routes.js

import React from 'react'
//IndexRoute就是根路由默认显示的
import {Route, IndexRoute} from 'react-router'
//从src/containers/index.js导入
import {App, Home} from './containers'

//这里IndexRoute入在根app下后，就是在App页面组件的props.children
//匹配规则参考官方文档
export default (
  <Route name='app' path='/' component={App}>
    <IndexRoute component={Home} />
  </Route>
)

重写src/app.js

import React from 'react'
import ReactDOM from 'react-dom'

import routes from './routes'
import {Router, browserHistory} from 'react-router'


ReactDOM.render(
  <Router history={browserHistory}>
    {routes}
  </Router>
  ,document.getElementById('app'))

完成npm run dev,看见如下图说明路由配置成功

编写第一个组件Counter

在编译过程中加入装饰器语法的插件，就要用到这个插件babel-plugin-transform-decorators-legacy

module:{
loaders:[
  {
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    query:{
      presets:['react','es2015','stage-0'],
      plugins:['transform-decorators-legacy'] //装饰器插件
    }
  }
]
},

这里我就不再累述如何用编写redux的组件了，唯一要提醒的就是这里我们用了es7的语法装饰器，这样整个应用的逻辑更加清楚。

src/components/Counter/Counter.js
在src/container/Home/Home.js页面组件下使用Counter组件

import React,{Component, PropTypes} from 'react'

import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'

import * as CounterActions from '../../redux/modules/counter'

@connect(
  state => ({counter:state.counter}),
  dispatch => bindActionCreators(CounterActions,dispatch)
)
export default class Counter extends Component{
  static propTypes = {
    counter:PropTypes.number.isRequired,
    increment:PropTypes.func.isRequired,
    incrementIfOdd:PropTypes.func.isRequired
  };

  render(){
    const {counter,increment,incrementIfOdd} = this.props;
    return(
      <div>
        <h2>{counter}</h2>
        <button onClick={increment}>
           You have clicked me {counter} time{counter === 1 ? '' : 's'}.
        </button>
        <button onClick={incrementIfOdd} >奇数加法</button>
      </div>
    )
  }

最后效果如下

Next

bootstrap-loader React-bootstrap使用