我正在使用带有组件延迟加载的React Router，并将Webpack用作bundler，当我访问首页/时，我可以在网络标签中看到bundle.js已加载，以及何时我单击侧边栏中的特定项目，相应组件的文件名已成功加载，例如0.bundle.js，但是当我直接从搜索栏导航到嵌套路线（例如http://127.0.0.1:8080/forms/select）时，出现这样的错误：
获取
http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404（未找到）
此错误表明bundle.js未加载，这意味着它无法加载其他块。
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true,
},
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
routes.js
import { lazy } from 'react';
const Forms = lazy(() => import('../components/uiViews/Forms'));
const SelectForm = lazy(() => import('../components/uiViews/Forms/SelectForm'));
const FormValidation = lazy(() => import('../components/uiViews/Forms/FormValidation'));
const routes = [
{
icon: 'form',
label: 'forms',
path: '/forms',
component: Forms,
children: [
{
icon: 'select',
label: 'selectInput',
path: '/forms/select',
component: SelectForm,
},
{ icon: 'issues-close', label: 'formValidation', path: '/forms/validation', component: FormValidation },
{
icon: 'form',
label: 'wizardForm',
path: '/forms/wizard',
component: WizardForm,
}],
},
];
export default routes;
路线渲染
<Suspense fallback={<div className="spin-loading"> <Spin size="large" /></div>}>
{routes.map((route, i) => {
return route.component ? RouteWithSubRoutes( {...route},`r${i}`) : null;
})}
</Suspense>
....
function RouteWithSubRoutes(route,key) {
return route.children ? (
route.children.map((subRoute,j) => {
return RouteWithSubRoutes(subRoute,`sr${j}`);
})
) : (
<Route key={key} path={route.path} exact component={() =>route.component? <route.component />:<ComingSoon/>} />
);
}
经过几天尝试不同的解决方案，终于我找到了this one，可以节省我的时间：
...我终于弄清楚了实际的问题，至少对于我来说，它与Webpack或React Hot Loader或React Router或任何其他库都没有直接关系。当使用HTML5推送状态来操纵浏览器历史记录时，我们必须在html头部分提供标签。在提供给我的html的开头部分之后，HMR甚至在嵌套路由中也像一种魅力。
<!DOCTYPE html> <html> <head> <base href="/" /> <!-- THIS TINY LITTLE THING --> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="root"></div> <script src="/main.bundle.js"></script> </body> </html>