Использование отложенной загрузки React при переходе к вложенному маршруту, основной пакет не загружается - PullRequest
Новая
       44

Использование отложенной загрузки React при переходе к вложенному маршруту, основной пакет не загружается

8 голосов
/ 16 января 2020

Я использую реагирующий маршрутизатор с отложенной загрузкой компонентов и использую Webpack в качестве связующего устройства . При доступе к домашней странице / я вижу на вкладке сети, что bundle.js загружен а также когда я щелкаю по указанному элементу c на боковой панели, соответствующий компонент успешно загружается с именем файла, например 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 (не найдено)

Эта ошибка означает, что 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"]
}

маршрутов. 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/>} />
    );
}

1 Ответ

5 голосов
/ 21 января 2020

После нескольких дней опробования различных решений, наконец, я нашел это , которое спасает мой день:

... Я наконец выяснил реальную проблему, и это не имеет прямого отношения ни к Webpack, ни к React Hot Loader, ни к React Router, ни к какой-либо другой библиотеке, по крайней мере, на данный момент, по крайней мере, для меня. При использовании состояния HTML5 pu sh для управления историей браузеров, мы ДОЛЖНЫ ОБЕСПЕЧИТЬ тег в нашем разделе html head. После предоставления заголовочной части моего html, 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>
...