reactjs - 延迟加载的块是从 /LAZY_COMPONENT_FOLDER_NAME/static/js 文件夹外部加载的

Question

当我构建项目时，我的反应应用程序在开发服务器上运行良好，屏幕变白，而嵌套子目录中的延迟加载组件。我有一个位于 /src/pages/property/index.js 的属性页，该文件包含一些延迟加载的组件。在构建中，假设这些组件是从 /static/js/CHUNK_NAME.chunk.js 加载的，但实际上是从 /property/static/js/CHUNK_NAME.chunk.js 加载的

属性/index.js

import React, { Suspense, lazy } from 'react';
import { Redirect, Route, Switch, useRouteMatch } from 'react-router';

const CreateProperty = lazy(() => import('./CreateProperty'));
const PropertyListing = lazy(() => import('./PropertyListing'));
const ViewProperty = lazy(() => import('./ViewProperty'));

export default function Property() {
  const { path } = useRouteMatch();
  return (
    <div>
      <Suspense fallback={<div></div>}>
        <Switch>
          <Route path={path + '/listing'} render={() => <PropertyListing />} />
          <Route path={path + '/create'} render={() => <CreateProperty />} />
          <Route path={path + '/view/:id'} render={() => <ViewProperty />} />
          <Redirect from={path} to={path + '/listing'} />
        </Switch>
      </Suspense>
    </div>
  );
}

网络通话图片

标签： reactjswebpack