React部署至Express服务器无内容显示问题求助

1. 配置Express的SPA fallback路由 #

React是单页应用，所有非静态资源的请求都需返回index.html，否则路由匹配会失败。检查你的server.ts，确保添加以下核心逻辑：

import path from 'path';
import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

// 指向React构建产物目录
app.use(express.static(path.join(__dirname, '../build')));

// 关键：所有非API请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build/index.html'));
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

注意：../build的路径要和你的实际文件结构匹配，确保Express能找到构建后的index.html。

2. 检查React路由的basename配置 #

如果你的网站在子路径下访问（比如托管平台的/home），需要在React的路由根组件中设置basename：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/home">
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
}

若自建服务器是根路径访问，则无需设置该属性。

3. 验证静态资源路径正确性 #

确认React构建后的index.html中，资源引用路径（如/static/js/main.xxx.js）是绝对路径，且Express的静态资源配置正确指向build文件夹。可手动访问资源URL（如http://你的服务器地址:端口/static/js/main.xxx.js），确认能正常加载。

4. 排查浏览器控制台错误 #

打开浏览器开发者工具（F12）：

• Console标签：查看是否有路由匹配失败、组件渲染报错信息
• Network标签：检查路由请求（如/home）是否返回index.html，而非404

5. 确认构建流程无问题 #

确保执行npm run build生成生产构建文件，构建过程无报错，build文件夹包含index.html和static子文件夹。

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