React Router搭配Express后端部署至生产环境后路由异常问题求助

我一眼就看出你遇到的是SPA路由在服务器端缺少 fallback 配置的典型问题——这也是很多React/Express SPA部署时容易踩的坑。

为什么会出现这个问题？ #

当你在线上访问/home这类非根路径时，你的Express服务器会默认去寻找服务器上对应路径的物理文件（比如/home.html），但你的SPA只有一个index.html，所以服务器找不到文件就返回了它默认的错误页面（或者其他你没配置的内容），根本没把请求交给React Router处理。而本地用http-serve正常，是因为http-serve默认已经帮你配置了「所有请求都 fallback 到index.html」的规则。

你的尝试为什么没生效？ #

• 调整前端路由配置（比如<Navigate>、修改404路径）：服务器根本没把请求传到前端路由，前端代码连执行的机会都没有，自然没用。
• 用HashRouter：这是规避问题的方式（HashRouter的路由部分在#后，服务器不会解析），但会让URL带上#，体验不够优雅，而且不是根本解决办法。
• 重新部署：没改服务器配置，部署多少次都白搭。

具体修复步骤 #

1. 先托管React构建后的静态资源

首先要让Express能返回你的前端静态文件（build文件夹里的内容），需要添加以下代码：

• 先引入path模块（Express处理文件路径必备）
• 用express.static托管build文件夹

2. 添加Catch-All路由

在所有API路由的后面，添加一个通配符路由，把所有非API的GET请求都转发到index.html，让React Router来处理路由逻辑。

修改后的完整后端代码（App.ts）

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
const request = require("request");
const https = require('https');
const fs = require('fs');
// 新增：引入path模块
const path = require('path');

const app = express();
app.use(express.json());
app.use(cors());

// 新增：托管React构建后的静态文件
app.use(express.static(path.join(__dirname, 'build')));

let transporter = nodemailer.createTransport({
  host: "mail.mail.com",
  port: 465,
  secure: true,
  auth: {
    user: "user@test.com",
    pass: "TestPassword123",
  }
});

transporter.verify((err, success) => {
  err ? console.log(err) : console.log(`Server is ready to receive messages: ${success}`);
});

// 建议：把API前缀改成/api，避免和前端路由冲突
app.post("/api/send", function (req, res) {
  let mailOptions = {
    from: `${req.body.mailerState.email}`,
    to: "test@gmail.com",
    subject: `Message from: ${req.body.mailerState.email}`,
    text: `${req.body.mailerState.message}`,
  };
  transporter.sendMail(mailOptions, function (err, data) {
    if (err) {
      res.json({ status: "fail", });
    } else {
      console.log("Message Sent");
      res.json({ status: "success", });
    }
  });
});

// 新增：Catch-All路由，所有非API的GET请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = 3001;
https
  .createServer(
    {
      key: fs.readFileSync("key.pem"),
      cert: fs.readFileSync("cert.pem"),
    },
    app
  )
  .listen(port, () => {
    console.log("Server is running at port 3001");
  });

// 注意：原来的根路径GET请求会和前端根路由冲突，建议删掉或者改成/api根路径
// app.get('/', (req, res) => {
//   res.send("Hello from express server.")
// })

关键注意点 #

• Catch-All路由必须放在所有API路由之后：如果放在前面，会把你的API请求（比如/api/send）也转发到index.html，导致API失效。
• API路由建议加前缀：比如把/send改成/api/send，这样能彻底避免和前端路由的路径冲突，也更符合RESTful规范。
• 确保你部署时已经把React的build文件夹上传到服务器，并且path.join(__dirname, 'build')的路径是正确的（根据你服务器上的文件结构调整）。

这样修改后重新部署，再访问/home、/test这类路径，服务器就会返回index.html，React Router就能正常接管，展示你的<PageNotFound />组件了。

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