Express服务React打包项目时React Router跳转报res.sendFile路径错误如何解决

• 缺少Node.js内置path模块的引入声明：代码中使用path.join()拼接路径前未引入path模块，导致拼接结果无效，res.sendFile拿到的路径不符合绝对路径要求
• 可选优化点：单独声明的/attendances路由与全局 fallback 路由功能重复，无需单独配置

1. 在文件顶部添加path模块引入：

const path = require('path');

2. 优化 fallback 路由逻辑，删除冗余的/attendances路由，同时为res.sendFile增加root参数做双重保险，避免路径解析异常：

// 原有静态资源托管、接口路由等逻辑保留，按原有顺序放在最前
app.use(express.static(path.join(__dirname, "build")));
app.use(express.static("public"));

// 所有自定义接口路由要放在fallback前面，否则会被拦截
// 比如/api/xxx这类后端接口，都要写在下面这个fallback的前面

// 全局路由回退，适配React单页应用的客户端路由
app.use((req, res) => {
  res.sendFile('index.html', { root: path.join(__dirname, "build") });
});

const path = require('path');
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const portApp = 3003;

app.use(cors());
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false,
  })
);

app.use(express.static(path.join(__dirname, "build")));
app.use(express.static("public"));

// 后续新增接口路由请写在此处，放在fallback前

app.use((req, res) => {
  res.sendFile('index.html', { root: path.join(__dirname, "build") });
});

app.listen(portApp, () => {
  console.log(
    `Attendance list App is listening at http://localhost:${portApp}`
  );
});

修改后重启服务，直接访问任意React客户端路由（比如/attendances）都会正常返回index.html，由React前端接管路由渲染，不会再触发路径报错，静态资源也会正常加载。

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