0
私は複数のルートを持つSPAを持っています。 Webpack 2とReact Router 4を使用したルートに基づいてコード分割を実装しようとしています。ルートに基づいて異なるチャンクを作成することができます。たとえば、ホームページの場合はvendor.js、main.js、home.jsです。 3つのファイルはすべて正常に読み込まれますが、出力は表示されません。 nullがレンダリングされています。以下は、React developerツールと使用されたコードのスクリーンショットです。私はここに何が欠けているのか分かりますか？リアクター・ルータ|コンポーネントがレンダリングされない
アプリケーションコンポーネント/ 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;
はい、 'getComponent'は実際には現在サポートされていないと思います。ウェブはチュートリアルでいっぱいですが。どのように私はそれを動作させるために私自身のいくつかのバリエーションでこれを使用しました。ありがとう！ – Yomesh