反應路由器| 組件未渲染

Question

我的SPA有多條路線。 我正在嘗試使用Webpack 2和React Router 4基於路由實現代碼拆分。我能夠基於路由創建不同的塊。 例如，對於主頁，我有vendor.js ， main.js和home.js 這三個文件均已成功加載，但未顯示任何輸出。 呈現null 。 以下是React開發人員工具和所用代碼的屏幕截圖。 我可以知道我在想什么嗎？

應用程序組件/ App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import NotificationContainer from '../containers/NotificationContainer';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <NotificationContainer />
                <BrowserRouter>
                    <Switch>
                        <Route
                            exact
                            path="/"
                            getComponent={(nextState, callback) => {
                                // import('./homepage/index').then(module => callback(null, module.default));
                                require.ensure(
                                    [],
                                    require => {
                                        callback(null, require('./homepage/index').default);
                                    },
                                    'home'
                                );
                            }}
                        />
                        <Route
                            path="/login"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['../containers/LoginContainer'],
                                    require => {
                                        require('../containers/LoginContainer');
                                    },
                                    'login'
                                );
                            }}
                        />
                        <Route
                            path="/forgetPassword"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['../containers/ForgetPasswordContainer'],
                                    require => {
                                        require('../containers/ForgetPasswordContainer');
                                    },
                                    'forgetPassword'
                                );
                            }}
                        />
                        <Route
                            path="/generateNewPassword"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['../containers/GenerateNewPasswordContainer'],
                                    require => {
                                        require('../containers/GenerateNewPasswordContainer');
                                    },
                                    'generateNewPassword'
                                );
                            }}
                        />
                        <Route
                            path="/signup"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['../containers/SignupContainer'],
                                    require => {
                                        require('../containers/SignupContainer');
                                    },
                                    'signup'
                                );
                            }}
                        />
                        <Route
                            path="/contact"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['./Contact'],
                                    require => {
                                        require('./Contact');
                                    },
                                    'contact'
                                );
                            }}
                        />
                        <Route
                            path="/tech"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['./Tech'],
                                    require => {
                                        require('./Tech');
                                    },
                                    'tech'
                                );
                            }}
                        />
                        <Route
                            path="/error"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['./Error'],
                                    require => {
                                        require('./Error');
                                    },
                                    'error'
                                );
                            }}
                        />
                        <Route
                            path="/user/dashboard"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['../containers/DashBoardContainer'],
                                    require => {
                                        require('../containers/DashBoardContainer');
                                    },
                                    'dashboard'
                                );
                            }}
                        />
                        <Route
                            path="/movie/:movieId"
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['../containers/MovieContainer'],
                                    require => {
                                        require('../containers/MovieContainer');
                                    },
                                    'movieContainer'
                                );
                            }}
                        />
                        <Route
                            getComponent={(nextState, callback) => {
                                require.ensure(
                                    ['./Error'],
                                    require => {
                                        require('./Error');
                                    },
                                    'error'
                                );
                            }}
                        />
                    </Switch>
                </BrowserRouter>
            </div>
        );
    }
}

export default App;

Webpack配置

const webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public/assets/js',
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: 'assets/js/'
    },
    plugins: [
        new BundleTracker({ filename: './webpack-stats.json' }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: '[name].js',
            minChunks: module => /node_modules/.test(module.resource)
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                screw_ie8: true,
                warnings: false
            },
            comments: false
        }),
        new BundleAnalyzer({ analyzerMode: 'static' })
    ],
    resolve: {
        modules: ['node_modules'],
        extensions: ['*', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                options: {
                    plugins: [
                        [
                            'transform-semantic-ui-react-imports',
                            {
                                convertMemberImports: true,
                                addCssImports: false,
                                importMinifiedCssFiles: false,
                                addLessImports: false,
                                addDuplicateStyleImports: false
                            }
                        ]
                    ],
                    presets: [['es2015', { modules: false }], 'react', 'stage-2', 'node6']
                }
            }
        ]
    },
    node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};

家用組件 主頁/ index.js

import React, { Component, PropTypes } from 'react';
import LayoutContainer from '../../containers/LayoutContainer';
import Hero from './Hero';
import About from './About';
import Working from './Working';

class Homepage extends Component {
    render() {
        return (
            <LayoutContainer scrollBound={600}>
                <div className="homepage-container">
                    <p>Here</p>
                    <Hero />
                    <About />
                    <Working />
                </div>
            </LayoutContainer>
        );
    }
}

export default Homepage;

Answer 1

您並非在所有情況下都調用callback ，因此該組件不會返回到路由。 例如，這：

<Route
  path="/login"
  getComponent={(nextState, callback) => {
    require.ensure(['../containers/LoginContainer'], require => {
      require('../containers/LoginContainer');
    }, 'login');
  }}
/>

...應該：

<Route
  path="/login"
  getComponent={(nextState, callback) => {
    require.ensure(['../containers/LoginContainer'], require => {
      callback(null, require('../containers/LoginContainer'));
    }, 'login');
  }}
/>

Answer 2

除非react-router的文檔是個大騙子，否則不再有用於路由的getComponent方法。 但是，滾動自己的延遲加載組件還不錯。 我不得不為一個更奇特的路由器做一個，這種方法也應該適用於react-router@4 。 首先，創建一個簡單的HOC：

export default function DeferredComponent(loadingFn) {
  return class DeferredComponentInstance extends React.Component {
    constructor() {
      super(...arguments);
      this.state = {
        InnerComponent: Spinner
      };
    }

    componentDidMount() {
      loadingFn((err, component) => {
        if (err) {
          throw err;  // Maybe render an error component instead?
        }

        this.setState({ InnerComponent: component });
      });
    }

    render() {
      const { InnerComponent } = this.state;
      return <InnerComponent { ...this.props }/>;
    }
  };
}

...現在您可以像這樣使用它：

<Route
  path="/login"
  component={DeferredComponent(cb => {
    require.ensure(['../containers/LoginContainer'], require => {
      cb(null, require('../containers/LoginContainer').default);
    });
  })}
/>