在getComponent()之后没有渲染拆分组件

时间:2016-06-21 08:19:27

标签: reactjs webpack react-router

我使用Code Splitting for React Router来加载组件异步,我成功了。但是当我在浏览器中打开我的页面时,我什么也没得到。这里有一些关键代码段:

routeConfig

// When i removed the annotation below, it did render !
// import Home from './containers/Home/Home'

const routeConfig = [
{
    path: '/',
    component: App,
    //indexRoute: {
    //    component: Home
    //}
    getIndexRoute(location, callback) {
        require.ensure([], (require) => {
            callback(null, require('./containers/Home/Home'))
        }, 'Home');
    }
}];

Home.jsx

console.log('HOME'); // It works!
class Home extends Component {
    render() {
        console.log('HOME COMPONENT'); // not working!
    }   
}

有什么想法吗?我被困在这里:(

这里是我的完整webpack配置代码:

/**
 * webpack config
 */
var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        vendor: [
            'react',
            'react-dom',
            'redux',
            'react-redux',
            'react-router',
            'redux-logger',
            'redux-thunk'
        ],
        main: [
            './html/index'
        ]
    },
    output: {
        // path: path.join(__dirname, 'html/dist'),
        path: './html/dist',
        publicPath: '/html/dist/',
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.js|jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel', // 'babel-loader' is also a legal name to reference
                query: {
                    plugins: ['transform-object-rest-spread'],
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.less$/,
                exclude: /(node_modules|bower_components)/,
                loader: "style!css!less"
            }
        ]
    },
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        // 'react': 'React',
        // 'react-dom': 'ReactDOM',
        // 'redux': 'Redux',
        // 'react-redux': 'ReactRedux',
        // 'react-router': 'ReactRouter',
        // 'redux-logger': 'reduxLogger',
        // 'redux-thunk': 'ReduxThunk'
    },
    // add this handful of plugins that optimize the build
    // when we're in production
    plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ] : [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            chunks: 'vendor'
        })
    ]
};

希望这会有所帮助。

Home.js确实已加载,但Home组件似乎未初始化。

1 个答案:

答案 0 :(得分:0)