Node服务器无法渲染React应用子页面问题求助

核心原因 #

React路由属于客户端路由，当直接访问http://localhost:3001/webrtc这类子路由时，Node服务器会尝试查找对应路径的静态文件，但这些路径并不存在于build文件夹中，因此返回404。必须让服务器在匹配不到任何静态资源时，返回React的index.html，交由React路由处理跳转逻辑。

具体修复步骤 #

1. 修改Node服务器的index.js #

确保服务器处理完静态资源后，对所有其他请求返回index.html，示例代码如下：

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

// 配置静态文件目录，指向React构建后的build文件夹
app.use(express.static(path.join(__dirname, 'build')));

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

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

2. 确认React路由配置 #

确保使用BrowserRouter（而非HashRouter），示例配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/webrtc" element={<WebRTC />} />
      </Routes>
    </Router>
  );
}

3. 重新构建并启动服务 #

# 在React项目目录执行构建
npm run build
# 启动Node服务器
node index.js

额外注意事项 #

• 确认Node服务器的静态文件路径正确，必须指向React项目构建后的build文件夹，路径错误会导致静态资源加载失败。
• 开发环境的代理配置仅用于本地调试，生产环境无需依赖该配置，所有请求由Node服务器统一处理。

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