Javascript 网页及；React getComponent（）未加载组件（异步）

我正在使用Webpack3.7.1和React 15.6.1，并尝试动态加载不同的组件

我想做什么

• 从代码拆分时创建的不同块Web包异步加载组件

我所做的

• 使用getComponent（）和import（）生成块
• 正确配置webpack.config文件，以便创建块（代码拆分）

问题

• 访问路由时，生成块，但未正确加载块
• getComponent（）似乎不起作用

我的Webpack.config文件 My index.js文件（我的react应用程序的根目录）

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“redux承诺”导入承诺；
从“/reducers”导入减速机；
从“/containers/AppInit”导入AppInit；
从“/containers/modals/register\u prof\u exploration\u model”导入ProfRegisteringModel；
const createStoreWithMiddleware=applyMiddleware（promise）（createStore）；
函数错误加载（err）{
控制台错误（“动态页面加载失败”，错误）；
}
功能加载路径（cb）{
返回module=>cb（null，module.default）；
}
console.log（“testst”）；
ReactDOM.render(
{
进口(
“/components/registing/registing_landing_page.js”
)
.然后（装载路线（cb））
.捕获（错误加载）；
}}
/>
{
进口(
“/components/registing/registing_landing_page.js”
)
.然后（装载路线（cb））
.捕获（错误加载）；
}}
/>
{
导入（“./containers/registing/signing_in.js”）
.然后（装载路线（cb））
.捕获（错误加载）；
}}
/>
{
导入（“./components/team_pres.js”）
.然后（装载路线（cb））
.捕获（错误加载）；
}}
/>
{
导入（“./containers/app_container.js”）
.然后（装载路线（cb））
.捕获（错误加载）；
}}
/>
,
document.querySelector（“.root”）
);

这个index.js文件加载正确，因为我可以看到控制台中出现的console.log（“test”）

访问任何路由时，没有一个组件正确加载。

非常感谢你的帮助 更新

---

一定要有Babel polyfill！！我就是这样解决的

您的webpack.config文件似乎很好。我所做的工作是在中创建异步组件

import React，{Component}来自“React”；
导出默认函数asyncComponent（导入组件）{
类AsyncComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
组件：空
};
}
异步组件didmount（）{
const{default:component}=wait importComponent（）；
这是我的国家({
组件：组件
});
}
render（）{
const C=this.state.component；
返回C？：空；
}
}
返回异步组件；
}

谢谢您的回答！你确定你能写render:props=>我刚做的组件={RegisterPage}，效果很好，谢谢！！我的主要问题是因为我错过了babel polyfill！！

module.exports = {
  devServer: {
    historyApiFallback: true
  },
  entry: {
    app:"./src/index.js",
    vendor: [
      "axios",
      "react",
      "react-dom",
      "react-redux",
      "react-router",
      "react-router-dom",
      "redux"
    ]
  },
  output: {
    path: __dirname + '/public/views',
    filename: '[name].js',
    chunkFilename: '[chunkhash].chunk.js',
    publicPath: "/views/"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: [/node_modules/, /pdfmake.js$/]
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    }),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      filename:  __dirname + "/views/index.ejs",
      template: __dirname + "/views/template.ejs",
      inject: 'body',
      chunks: ['vendor', 'app'],
      chunksSortMode: 'manual'
    }),
    new PreloadWebpackPlugin({
      rel: "preload",
      include: ["vendor", "app"]
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ]
};

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import promise from "redux-promise";
import reducers from "./reducers";
import AppInit from "./containers/appInit";



import ProfRegisteringModal from "./containers/modals/register_prof_explanation_modal";

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

function errorLoading(err) {
  console.error("Dynamic page loading failed", err);
}

function loadRoute(cb) {
  return module => cb(null, module.default);
}

console.log("testst");

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <AppInit>
      <BrowserRouter>
        <div style={{ height: "100%" }}>
          <ProfRegisteringModal />
          <Switch>
            <Route
              path="/inscription/:user"
              getComponent={(location, callback) => {
                import(
                  "./components/registering/registering_landing_page.js"
                )
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/inscription"
              getComponent={(location, callback) => {
                import(
                  "./components/registering/registering_landing_page.js"
                )
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/connexion"
              getComponent={(location, callback) => {
                import("./containers/registering/signing_in.js")
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/equipe"
              getComponent={(location, callback) => {
                import("./components/team_pres.js")
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
            <Route
              path="/"
              getComponent={(location, callback) => {
                import("./containers/app_container.js")
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }}
            />
          </Switch>
        </div>
      </BrowserRouter>
    </AppInit>
  </Provider>,
  document.querySelector(".root")
);