React+Express架构下，使用res.sendFile返回index.html导致useState数据变为undefined的问题求助

看起来你遇到的是前端路由和后端API路由冲突引发的连锁问题，我之前也踩过这个坑，给你拆解下原因和解决办法：

问题根源 #

你添加的通配符路由app.get('/*', ...)会捕获所有请求——包括前端用来获取数据的API请求！这就导致React组件请求后端数据时，拿到的不是预期的JSON，而是index.html的文件内容。当你尝试把HTML字符串解析成JSON（或直接赋值给useState）时，自然就变成undefined了，这就是状态异常的核心原因。

分步解决方案 #

1. 调整Express路由顺序：API路由优先

一定要把所有API路由放在通配符路由的前面，这样Express会先匹配API请求，只有当没有匹配到任何API路由时，才会返回index.html交给React Router处理前端路由。

给你一个正确的路由顺序示例：

const express = require('express');
const path = require('path');
const app = express();

// 第一步：先定义所有API路由（比如以/api开头的接口）
app.get('/api/user-list', (req, res) => {
  // 返回你的业务数据，比如初始空数组或实际数据
  res.json([]);
});

// 第二步：托管React build后的静态资源（JS、CSS、图片等）
app.use(express.static(path.join(__dirname, '../frontend/build')));

// 第三步：最后处理前端路由，返回index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'), function(err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

2. 检查前端API请求路径

确保前端的请求路径是以/api开头的绝对路径，比如用fetch('/api/user-list')而非相对路径fetch('user-list')。相对路径在刷新页面时会跟着当前URL变化，比如刷新/pageName时，相对路径会变成/pageName/user-list，被通配符路由捕获返回HTML，导致数据异常。

3. 用浏览器调试确认请求

打开浏览器的Network面板，刷新页面后查看获取数据的请求：

• 如果Response内容是index.html，说明路由顺序错误，API请求被通配符路由拦截了；
• 如果Response是正常的JSON数据，再检查你的状态赋值逻辑，看是否在处理响应时出错。

额外提醒 #

这个方案同时也解决了你最初的“刷新非首页Cannot GET”问题——所有前端路由请求都会返回index.html，由React Router接管页面渲染，不会出现404。

内容来源于stack exchange