TCG开发日志（5）Decorator, React-router

标签：

通过webpack可以把整个React项目整合成一个单页面的网站，此时可以通过react-router来处理路由。

首先安装：

npm install react-router --save

由于react-router使用了history，要在webpack.config.js中进行相应的配置：

devServer: {
　　historyApiFallback: true

}

否则，类似localhost:8080/foo的URL会返回404。之后为了将整个项目做成一个单页面，做如下处理：

import { Router, browserHistory } from ‘react-router‘;

export default class App extends React.Component

{
　　routes = {
　　　　path: ‘/‘,
　　　　indexRoute: {
　　　　　　onEnter: (nextState, replace) => {},
　　　　},
　　　　childRoutes:[
　　　　]
　　}

　　render(){
　　　　return <Router history={browserHistory} routes={this.routes} />
　　}
}

其中，routes的配置可参见react-router的github页面。同时，需要给别的组件都配置相应的route，这些route要写在routes.childRoutes里。

由于大量的组件都需要进行route的设置，这可以看作组件类的共同特征，可以用Decorator的方式让代码更简洁，Decorator的详细信息可以查到，但为了使用它，首先必须安装相应的Babel插件：

npm install babel-plugin-transform-decorators-legacy --save，同时，需要在.babelrc中的plugins里做相应配置：

"plugins": [
　　"transform-class-properties",
　　"babel-plugin-transform-decorators-legacy"
],

这里我们定义一个函数reactComponentEx，用它返回一个Decorator函数，并在函数中对类做相应的处理，主要是配置react-router：

export default function reactComponentEx(path){
　　return function (target, property, descriptor){

　　　　class _target extends target{
　　　　　　static route = {
　　　　　　　　path:path,
　　　　　　　　component:_target,
　　　　　　　　indexRoute:{},
　　　　　　　　childRoutes:target.childRoutes && target.childRoutes.map(v=>{
　　　　　　　　　　return {
　　　　　　　　　　　　path: v.path,
　　　　　　　　　　　　component: v.component
　　　　　　　　　　}
　　　　　　　　})
　　　　　　}

　　　　};

　　　　return _target;
　　}
}

此时，可以将这个函数写在每一个想要设置路由的react组件的最外面，如：

@reactComponentEx(‘foo‘)

export default class Foo extends React.Component{......

再把它配置到刚才的总route里：

routes = {
　　　　path: ‘/‘,
　　　　indexRoute: {
　　　　　　onEnter: (nextState, replace) => {},
　　　　},
　　　　childRoutes:[

　　　　　　require("foo").default.route   //通过Decorator已经生产了这个route
　　　　]
　　}

就可以用localhost:8080/foo的形式访问到相应的页面了。

TCG开发日志（5）Decorator, React-router

标签：

原文地址：http://www.cnblogs.com/wowbrionac/p/5671728.html