Sử dụng React lười tải khi tôi điều hướng đến một tuyến đường lồng nhau, gói chính không tải

Tôi đang sử dụng bộ định tuyến phản ứng với việc tải thành phần lười biếng và sử dụng Webpack như một gói , Khi tôi truy cập vào trang chủ, / tôi có thể thấy trong tab mạng bundle.jsđược tải và cả khi tôi nhấp vào một mục cụ thể trong thanh bên, thành phần tương ứng được tải thành công với tên tệp của nó chẳng hạn 0.bundle.js, tuy nhiên khi tôi điều hướng trực tiếp từ thanh tìm kiếm đến một tuyến đường lồng nhau (ví dụ http://127.0.0.1:8080/forms/select) tôi gặp một lỗi như thế này:

NHẬN http://127.0.0.1:8080/forms/bundle.jsmạng :: ERR_ABORTED 404 (Không tìm thấy)

Lỗi này chỉ ra rằng bundle.jskhông được tải có nghĩa là nó không thể tải các khối khác.

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"]
}

Rout.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;

kết xuất tuyến đường

<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/>} />
    );
}

— Boussadjra Brahim
nguồn

Điều này không liên quan đến bộ định tuyến phản ứng, vì nó không định tuyến tài sản của bạn. Đó là một được một thời gian kể từ khi tôi đã thiết lập webpack, nhưng tôi khá chắc chắn rằng vấn đề là ở hưởng lẫn nhau giữa publicPath, entryvà / hoặc outputcon đường, cần một path.resolve()hoặc hai trong đó.

— Ryan Florence

@RyanFlorencethanks cho câu trả lời của bạn, tôi đã tìm thấy giải pháp

— Boussadjra Brahim

Sau một vài ngày thử các giải pháp khác nhau, cuối cùng tôi đã tìm thấy giải pháp này giúp tiết kiệm thời gian của tôi:

... Cuối cùng tôi đã tìm ra vấn đề thực tế và nó không liên quan trực tiếp đến Webpack hoặc React Hot Loader hoặc React Router hoặc bất kỳ thư viện nào khác ít nhất là cho tôi ít nhất là bây giờ. Khi sử dụng trạng thái đẩy HTML5 để thao tác lịch sử trình duyệt, chúng ta PHẢI CUNG CẤP thẻ trong phần đầu html của chúng tôi. Sau khi cung cấp cho phần đầu của html của tôi, HMR hoạt động như một nét quyến rũ ngay cả trong các tuyến đường lồng nhau.
<!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>

— Boussadjra Brahim
nguồn