Verwenden von React Lazy Loading, wenn ich zu einer verschachtelten Route navigiere, die das Hauptpaket nicht lädt

8

Ich verwende reagieren Router mit Komponente verzögertes Laden und mit Webpack als Bündler , wenn ich auf die Homepage zugreifen / kann ich im Netz Registerkarte sehen , dass die bundle.jsgeladen wird , und auch wenn ich auf einem bestimmten Element in der Seitenleiste der Korrespondent Komponente wird beispielsweise erfolgreich mit seinem Dateinamen geladen. 0.bundle.jsWenn ich jedoch direkt von der Suchleiste zu einer verschachtelten Route navigiere (Beispiel http://127.0.0.1:8080/forms/select), wird folgende Fehlermeldung angezeigt:

GET http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404 (nicht gefunden)

Dieser Fehler zeigt an, dass der bundle.jsnicht geladen ist, was bedeutet, dass die anderen Chunks nicht geladen werden können.

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

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

Routen rendern

<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/>} />
    );
}
javascript reactjs webpack react-router lazy-loading Boussadjra Brahim
quelle
1
Dies hat nichts mit dem Reagieren des Routers zu tun, da er Ihre Assets nicht weiterleitet. Es ist ein schon eine Weile her, seit ich webpack eingerichtet, aber ich bin mir ziemlich sicher , dass das Problem im Zusammenspiel zwischen publicPath, entryund / oder outputPfade, müssen eine path.resolve()oder zwei drin.
Ryan Florence
@ RyanFlorencethanks für Ihre Antwort, ich fand die Lösung
Boussadjra Brahim

Antworten:

5

Nachdem ich einige Tage lang verschiedene Lösungen ausprobiert hatte, fand ich endlich diese , die meinen Tag rettet:

... Ich habe endlich das eigentliche Problem herausgefunden und es hängt nicht direkt mit Webpack oder React Hot Loader oder React Router oder einer anderen Bibliothek zusammen, zumindest für den Moment, zumindest für mich. Wenn Sie den HTML5-Push-Status zum Bearbeiten des Browserverlaufs verwenden, MÜSSEN WIR das Tag in unserem HTML-Kopfbereich bereitstellen. Nachdem ich den Kopfbereich meines HTML-Codes bereitgestellt habe, funktioniert HMR auch auf verschachtelten Routen wie ein Zauber.

<!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>
Boussadjra Brahim
quelle