当我导航到主包未加载的嵌套路由时使用 React.js 延迟加载
Posted
技术标签:
【中文标题】当我导航到主包未加载的嵌套路由时使用 React.js 延迟加载【英文标题】：Using React.js lazy loading when I navigate to a nested route the main bundle doesn't load 【发布时间】：2020-05-03 05:41:42 【问题描述】：我正在使用带有组件延迟加载的 React 路由器并使用 Webpack 作为 bundler，当我访问主页 / 时，我可以在网络中看到bundle.js 已加载的选项卡，并且当我单击侧栏中的特定项目时，相应组件已成功加载，其文件名例如 0.bundle.js，但是当我直接从搜索栏导航到嵌套路由时（例如http://127.0.0.1:8080/forms/select) 我收到如下错误：
GET
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/> />
);
【问题讨论】：
这与反应路由器无关，因为它不会路由您的资产。我设置 webpack 已经有一段时间了，但我很确定问题出在publicPath、entry 和/或output 路径之间的相互作用中，需要一个path.resolve() 或两个.
【参考方案1】：
经过几天尝试不同的解决方案，我终于找到了this one，这可以节省我的时间：
...我终于弄清楚了实际问题，它与 Webpack 或 React Hot Loader 或 React Router 或任何其他库都没有直接关系，至少现在至少对我来说是这样。当使用 html5 推送状态来操作浏览器历史时，我们必须在我们的 html 头部部分提供标签。在提供给我的 html 的 head 部分之后，即使在嵌套路由中，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>
【讨论】：
以上是关于当我导航到主包未加载的嵌套路由时使用 React.js 延迟加载的主要内容，如果未能解决你的问题，请参考以下文章