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的形式訪問到相應的頁面了。