代码拆分不适用于 CRA + React Route v4 + 代码拆分

Question

在网络服务器后面托管应用程序时，代码拆分不起作用

我的设置：我有一个弹出的 CRA，它使用路径/management下的Web 服务器托管因此，如果我去myfacnywebsite.com/management我得到我的反应应用程序

由于我将应用程序托管在 WebServer 后面，因此我根据https://create-react-app.dev/docs/deployment#building-for-relative-paths在 package.json 中设置了"homepage": "/management"

另外，由于我使用的是 react-router-v4，我将 baseName 设置为 /management 以使其在刷新时工作https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

现在，问题是当我在路由级别添加代码拆分时，当我在本地运行应用程序时一切正常

但是，当我在路径/管理下的网络服务器后面应用时。 请求的包正在获取 /management/management 的 URL。 我很困惑是怎么回事😕

我的index.ts文件中的代码片段

ReactDOM.render(
  <Provider store={store}>
    <ApolloProvider client={cqrsClient}>
      <ErrorBoundary name="app" ErrorComponent={DefaultError}>
        <Router  basename="/management">
          <App />
        </Router>
      </ErrorBoundary>
    </ApolloProvider>
  </Provider>,
  document.getElementById("root")
);

我的package.json 中用于 CRA 的代码片段

{
  "name": "FancyApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    ...
  },
  "babel": {
    ...
  },
  "homepage": "/management"
}

Answer 1

这是一个很棒的视频教程，介绍了使用 React a Router 和 Suspense 进行代码拆分和延迟加载的正确方法： https : //youtu.be/j8NJc60H294

您可以使用此代码，但我强烈推荐上面的视频。

import React, { Suspense } from 'react';
import lazy from 'react-lazy-named';

const LoremIpsum = lazy(()=>import('react-lorem-ipsum'));

const BoringContent = () => (
  <section>
    <h2>Terms and Conditions</h2>
    <LoremIpsum avgWordsPerSentence={12} p={10} />
    <Suspense fallback={<div>Lorem ipsum</div>}>
      <LoremIpsum avgWordsPerSentence={12} p={10} />
    </Suspense>
  </section>
);