React+Express部署至Render平台后路由失效问题求助

本地localhost环境下路由功能正常，但部署到Render平台后路由无法工作，示例如下：

核心代码 #

React 端 App.js #

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<AllSectionsPage />} />
          <Route path="/admin/login" element={<LoginPage />} />

          {/* 受保护路由 */}
          <Route element={<PrivateRoutes />}>
            <Route
              path="/admin/reservation/overview"
              element={<ReservationsOverView />}
            />
            <Route path="/admin/logout" element={<Logout />} />
            <Route path="/admin/pricing" element={<Pricing />} />
            <Route
              path="/admin/calendar-settings"
              element={<CalendarSettings />}
            />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Express 端 app.js #

const express = require('express')
const app = express()
const cors = require("cors")
const path = require('path')

// 路由引入
const reservationRoutes = require("./routes/Reservation/reservation")
const adminRoutes = require("./routes/Admin/admin")

const port = 8000
// 中间件
app.use(cors())
app.use(express.json());
app.use(express.static(path.join(__dirname + "/public"))) // 托管React构建产物

// API路由
app.use("/api/reservations",reservationRoutes)
app.use("/api/admin",adminRoutes)

app.listen(port, () => {
    console.log(`服务器运行在端口 ${port}`)
})

解决方法 #

问题根源是单页应用(SPA)的路由机制：本地开发时，React Router直接在浏览器端处理路由；但部署到Render后，直接访问非根路径（比如/admin/login）时，Render会向Express服务器发起该路径的请求，而Express没有配置对应路由，返回404。

1. 给Express添加SPA回退路由 #

在所有API路由之后，添加以下代码，让所有非API请求都返回React的入口文件index.html，交由React Router处理路由：

// 所有非API路由都返回React入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/public/index.html'));
});

如果你的React构建产物目录是build（默认create-react-app的构建目录），需要修改静态文件路径和回退路由：

// 修改静态文件托管路径
app.use(express.static(path.join(__dirname, "/build")))

// 回退路由指向build目录下的index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/build/index.html'));
});

2. 检查Render平台的部署配置 #

• Build Command：确保包含React的构建步骤，比如前后端同项目时，命令可以是：cd client && npm install && npm run build && cd .. && npm install
• Start Command：确认是启动Express服务的命令，比如node app.js

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