使用Node.js GET请求加载页面时React内容无法渲染的解决办法

问题背景 #

使用npx create-react-app my-app创建React项目，npm start启动后页面运行正常。但创建server文件夹用Express的app.get加载public目录下的index.html时，HTML内容可显示，但id为root的div中的React内容无法渲染，路径问题已解决，但该问题仍存在。

项目目录结构说明：根目录下包含food-site（React项目）和server文件夹，food-site内有public、src等子目录。

原因分析 #

直接返回public目录下的原始index.html无法加载React内容，核心原因是该文件未包含React编译后的JavaScript bundle脚本。create-react-app在npm start时，由webpack-dev-server动态将bundle脚本注入页面；而直接访问public/index.html时，缺少这些关键脚本，导致React无法初始化并渲染内容。

解决方案 #

方案1：使用React生产构建文件（推荐生产环境） #

1. 构建React项目
   在React项目根目录（food-site）下执行：

npm run build

执行后会生成build文件夹，包含编译后的所有静态资源（HTML、CSS、JS）。

2. 修改Express配置
   更新server目录下的index.js，将静态资源路径指向React的build文件夹，并调整路由返回build目录下的index.html：

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
const path = require("path");
const dotenv = require("dotenv").config();

// 指向React构建后的build文件夹
const staticPath = path.join(__dirname, '../food-site/build');

app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(staticPath));

// 匹配所有路由，返回build目录下的index.html（支持React路由）
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, '../food-site/build/index.html'));
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log("Server connected on port: " + PORT);
});

3. 启动服务器
   在server目录下执行node index.js，访问对应端口即可看到React内容正常渲染。

方案2：开发环境代理（本地开发用） #

若想在开发环境同时运行React开发服务器和Express后端，无需提前构建：

1. 在React项目的package.json中添加代理配置：

"proxy": "http://localhost:3001"

（假设Express服务器运行在3001端口）

2. 分别启动服务

• 在React项目根目录执行npm start（默认3000端口）
• 在server目录执行node index.js（3001端口）

访问http://localhost:3000，React会自动将API请求代理到Express服务器，同时React内容由webpack-dev-server正常加载。

额外检查点 #

• 确认React项目的src/index.js有正确的渲染逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

• 查看build后的index.html，确认包含类似<script src="/static/js/main.xxx.js"></script>的bundle引用，这些脚本会被Express的静态资源中间件正确加载。

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