typescript - วิธีการให้บริการไฟล์ HTML หลายไฟล์ด้วย React?

ฉันต้องการสร้างเว็บแอปพลิเคชันด้วย React ที่มีหลายหน้า HTML ตัวอย่างเช่น login.html และ index.html ฉันได้สร้างหน้า HTML เหล่านี้และจับคู่พวกมันกับ URI ในฝั่ง backend ของฉัน ดังนั้นฉันจึงมี localhost:8080/login และ localhost:8080/index น่าเสียดายที่ React ใช้แค่ไฟล์ index.html ในการแสดงเนื้อหาเท่านั้น!

ดังนั้นไฟล์ index.html จึงทำงานและเนื้อหา React ถูกแสดง: localhost:3000/index.html

<!-- index.html -->
...
<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>
  <div id="wizard"></div>
</body>
...

<!-- index.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FetchData from "./FetchData";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<div className="d-flex flex-column">
            <div className="bg-dark text-light AppHeading">Self-Service-Webwizard</div>
            <div className="bg-white"><FetchData /></div>
        </div>,
document.getElementById('wizard') as HTMLElement
);
registerServiceWorker();

แต่ wizardLogin.html ไม่แสดงเนื้อหา React: localhost:3000/wizardLogin.html

<!-- wizardLogin.html -->
...
<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>
  <div>Wizard login</div>
  <div id="wizardLogin"></div>
</body>
...

<!-- LoginPage.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import LoginForm from "./LoginForm";

ReactDOM.render(
    <div>
        <div><h1>Wizard Login.tsx</h1></div>
        <div><LoginForm/></div>
    </div>,
    document.getElementById('wizardLogin') as HTMLElement
)
;
registerServiceWorker();

ฉันกำลังทำอะไรผิดหรือไม่ หรือมันเป็นไปไม่ได้ที่จะให้บริการไฟล์ HTML หลายไฟล์กับ React?

Github: https://github.com/The-Taskmanager/SelfServiceWebwizard

คำตอบ #1

ถ้าคุณใช้ create react app คุณต้อง eject โปรเจกต์ของคุณก่อน เพราะคุณต้องเปลี่ยน entry point ของคุณในการตั้งค่า Webpack

แรก eject (ถ้าคุณไม่มีไฟล์คอนฟิก webpack)

    npm run eject 

และหลังจากนั้นไปที่ไฟล์คอนฟิก

ใน webpack.config.js

entry: {
    index: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appIndexJs,
    ],
    admin:[
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appSrc + "/admin.js",
      ]
  },
  output: {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  },

หลังจากนั้นคุณควรเพิ่มปลั๊กอิน Wepack และเพิ่มมันไปยังโครงการของคุณ

 new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'admin.html',
    }),

นอกจากนี้คุณควรเขียน URL ใหม่

historyApiFallback: {
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ]
    }

คุณสามารถอ่านหน้านี้เพื่อข้อมูลเพิ่มเติมได้ที่ http://imshuai.com/create-react-app-multiple-entry-points/