如何将现有React Todo应用挂载到网页子页面？挂载失败求助

我有一个部署在Github Pages上的网站，主页有3个按钮分别链接到子页面。我按照某教程制作了一个React Todo应用，想要将其挂载到子页面projects.html，但使用Live Server打开该页面时显示空白。

我的尝试步骤：

1. 将构建好的React应用中的App.js、App.css、index.js复制到projects.html旁的/react-todo-app文件夹中
2. 向projects.html中添加必要的脚本和div标签：

<!-- To load React add the scripts. -->
 <script
   crossorigin
   src="https://unpkg.com/react@18/umd/react.development.js"
 ></script>
 <script
   crossorigin
   src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
 ></script>

 <script src="/react-todo-app/index.js"></script>
 <!-- <script src="/react-todo-app/App.js"></script> -->

/react-todo-app/index.js内容：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1. 补充React挂载根元素 #

React需要一个DOM节点作为挂载入口，你需要在projects.html的<body>标签内添加div#root：

<body>
  <!-- 新增挂载容器 -->
  <div id="root"></div>

  <!-- 原有的React CDN脚本 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  ...
</body>

2. 解决ES模块导入兼容问题 #

浏览器普通<script>标签不支持import语法，需做以下调整：

• 给引入index.js的脚本添加type="module"属性
• 修正index.js中的依赖导入路径，改用CDN的ES模块版本：

// index.js 修改后
import React from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";
import App from "./App.js";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

同时更新projects.html中的脚本引入：

<script type="module" src="./react-todo-app/index.js"></script>

3. 改用React构建产物（更稳妥的方案） #

你当前复制的是React源码文件，这类文件需要打包才能在浏览器正常运行。正确流程是：

• 在你的React Todo项目中执行npm run build，生成build文件夹
• 将build文件夹内的所有文件（含静态资源、打包后的JS/CSS）复制到projects.html旁的react-todo-app目录
• 在projects.html中引入构建后的资源：

<body>
  <div id="root"></div>
  <!-- 引入构建后的CSS -->
  <link rel="stylesheet" href="./react-todo-app/static/css/main.xxxx.css">
  <!-- 引入构建后的JS -->
  <script src="./react-todo-app/static/js/main.xxxx.js"></script>
</body>

注：文件名中的xxxx是构建生成的哈希值，需替换为实际文件名。

4. 修正路径问题 #

将所有资源路径改为相对路径（如./react-todo-app/xxx），避免使用根路径（/react-todo-app/xxx）——Github Pages子页面的路径并非站点根目录，根路径会导致资源加载失败。

5. 引入样式文件 #

如果使用源码方案，需要在projects.html中手动引入App.css：

<link rel="stylesheet" href="./react-todo-app/App.css">

内容的提问来源于stack exchange，提问作者FartVader