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

Question

Code splitting not working when host app behind a webserver

My Setup: I have an ejected CRA that is hosted using a Web Server under the path /management Hence, If I go to myfacnywebsite.com/management I get my react app

Since I am hosting the app behind a WebServer I am setting "homepage": "/management" in package.json as per https://create-react-app.dev/docs/deployment#building-for-relative-paths

Also, since I am using react-router-v4 I am setting baseName to /management to make it work across refresh https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

Now, the problem is when I add code splitting at route level, everything works fine when I run app locally

However, when I app behind a webserver under path /management. The bundles requested are getting the URL of /management/management . I am confused what is going on 😕

Code snippet from my index.ts file

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

Code snippet from my package.json for CRA

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

Answer 1

Here's a great video tutorial that goes over the right way of using React a Router and Suspense for code splitting and lazy loading: https://youtu.be/j8NJc60H294

You can use this code but I highly recommend the video above.

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