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