我正在使用Webpack 3.7.1和React 15.6.1,我正在尝试动态加载不同的组件。
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")
);
此文件已正确加载,因为我可以在控制台中看到console.log(“test”)。
访问任何路线时,没有正确加载任何组件。
答案 0 :(得分:1)
我认为您的代码缺少的是一种触发更新的方法。
我记得通过围绕import()
承诺创建一个包装来解决这个问题。
// AsyncComponent.js
export default function wrapper(importComponent) {
class AsyncComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
Comp: null
};
}
componentDidMount() {
importComponent()
.then(Comp => this.setState({
Comp
}))
.catch(err => this.setState({
error: err
}));
}
render() {
if(this.state.error) {
return <h2> Loading error
<button onClick={e => this.componentDidMount()}> Try again </button>
</h2>
}
const Comp = this.state.Comp;
return Comp ?
<Comp {...this.props} /> :
<div> Still Loading: You can add a spinner here </div>
}
}
return AsyncComponent;
}
// Routes.js
import AsyncComponent from './component/AsyncComponent';
const Users = AsyncComponent(() => import(/* webpackChunkName:"users" */ './Users'))
const Home = AsyncComponent(() => import(/* webpackChunkName:"home" */ './Home'))
const Equipe = AsyncComponent(() => import(/* webpackChunkName:"equipe" */ './Equipe'))
<Route path='/users' component={Users} />
<Route path='/equipe' component={Equipe} />