个人中心
gpt4 book ai didi

javascript - 当我导航到主包不加载的嵌套路由时使用 React.js 延迟加载

转载 作者：行者123 更新时间：2023-12-03 13:24:26 25 4
gpt4 key购买 nike

我使用带有组件延迟加载的React Router，并使用Webpack作为 bundler ，当我访问主页/时，我可以在网络选项卡中看到 bundle.js 已加载，并且当我单击侧边栏中的特定项目时，相应的组件已成功加载其文件名，例如 0.bundle .js，但是，当我直接从搜索栏导航到嵌套路由(例如 http://127.0.0.1:8080/forms/select)时，我收到如下错误:

GET http://127.0.0.1:8080/forms/bundle.js net::ERR_ABORTED 404 (Not Found)

此错误表明 bundle.js 未加载，这意味着它无法加载其他 block 。

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这节省了我的时间:

... I finally figured out the actual issue and it is not directly related to either Webpack or React Hot Loader or React Router or any other library at least for now at least for me. When using HTML5 push state to manipulate browsers history WE MUST PROVIDE tag in our html head section. After providing to the head section of my html, HMR works like a charm even in nested routes.

<!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>


关于javascript - 当我导航到主包不加载的嵌套路由时使用 React.js 延迟加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59768646/

25 4 0
文章推荐： reactjs - 为什么 React hook 与 fetch api 一起使用时会抛出 act 错误？
文章推荐： javascript - NightmareJS promise中的问题
文章推荐： r - 包含来自外部R脚本的代码，运行，同时显示代码和输出
文章推荐： html - 有什么方法可以使用Nightmare JS在网页的内部框架中导航？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com