如何用Express的sendFile发送React.js文件？create-react-app页面空白咨询

嘿，我之前也遇到过一模一样的情况，咱们来拆解下问题根源，然后快速搞定它！

问题原因 #

你直接给/test路径返回index.html的做法没问题，但create-react-app默认是基于根路径（/）来加载React的JS资源文件。当浏览器在localhost:3001/test页面时，会尝试从/test/static/js/xxx.bundle.js去加载脚本，但这些文件实际是放在项目的/static/js/目录下的，路径不匹配导致脚本加载失败，React代码没执行，id="root"的容器自然就没内容啦。

两种解决方案 #

方案一：配置SPA路由 fallback（推荐） #

如果你的项目是单页应用，最好让服务器对所有非API的请求都返回index.html，这样不管访问哪个路径，React路由都能正常接管。修改你的服务器代码：

首先引入path模块（避免路径拼接出错）：

const path = require('path');

然后调整路由顺序，先处理API接口，再处理所有其他请求：

// 先处理你的API路由（如果有的话）
app.get('/api/your-api', (req, res) => {
  // 你的API逻辑
});

// 所有非API请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/public/index.html'));
});

这样不管你访问/test还是其他路径，都会返回正确的HTML，并且资源路径也会基于根路径加载，不会出错。

方案二：修改React的资源基础路径 #

如果确实需要把/test作为固定入口，可以修改create-react-app的homepage配置：

1. 在项目根目录的package.json里添加一行：

"homepage": "/test"

2. 如果是生产环境，重新执行npm run build；如果是开发环境，重启npm start。

这样create-react-app会自动调整index.html里的脚本路径，比如从<script src="/static/js/main.js">变成<script src="/test/static/js/main.js">，浏览器在/test路径下就能正确加载到JS资源，React代码正常执行后就会渲染内容到root容器里了。

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