ネストされたルートに移動するときにReactの遅延読み込みを使用すると、メインバンドルが読み込まれません

私使用していますが、コンポーネント遅延ロードとしてのWebPACKを使用してルータに反応バンドラ私がホームページにアクセスすると、/ 私はそれをネットワーク]タブで見ることができる 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/>} />
    );
}

— ブサジャラブラヒム
ソース

これはアセットをルーティングしないため、react routerとは無関係です。それだとなっている間、私はWebPACKの設定しましたが、私はかなり確信して問題は間の相互作用にあるんだことからpublicPath、entryおよび/またはoutputパスは、必要path.resolve()があるまたは2を。

— ライアンフローレンス

@RyanFlorencethanksあなたの返信、私は解決策を見つけました

— Boussadjra Brahim

数日間、さまざまな解決策を試した後、ようやくこれが私の日を救うこの解決策を見つけました：

...私は最終的に実際の問題を理解しましたが、少なくとも今のところ、それはWebpack、React Hot Loader、React Router、またはその他のライブラリに直接関連していません。HTML5プッシュ状態を使用してブラウザーの履歴を操作する場合、HTMLヘッドセクションにタグを指定する必要があります。私のhtmlのヘッドセクションに提供した後、HMRはネストされたルートでも魅力のように機能します。
<!DOCTYPE html>
<html>
    <head>
        <base href="/" /> 
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="/main.bundle.js"></script>
    </body>
</html>

— ブサジャラブラヒム
ソース