React静态应用除根路径外无法导航/刷新的解决方法咨询

问题核心是：React Router属于前端路由，所有路由逻辑在浏览器端处理；但当直接访问非根路径（如/hello）或刷新页面时，浏览器会向服务器发起对应路径的请求，而服务器托管的静态文件中没有该路径的物理文件，因此返回404。

解决步骤： #

1. 修正静态文件目录：
   create-react-app执行yarn build后，生成的静态文件都在build目录下，而非默认的public目录（public是开发时的静态资源目录）。首先将Express的静态托管指向正确的build目录。

2. 添加路由回退（Fallback）：
   让服务器将所有非API的GET请求都返回index.html，由React应用加载后，再通过React Router处理前端路由。

修改后的Express代码示例： #

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

// 托管build目录下的静态资源（CSS、JS、图片等）
app.use(express.static(path.join(__dirname, 'build')));

// 若有API接口，需放在静态托管和回退路由之前
app.get('/api/your-endpoint', (req, res) => {
  res.json({ data: 'API响应内容' });
});

// 所有GET请求都返回index.html，交由React Router处理路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

关键说明： #

• 必须确保API路由定义在静态托管和回退路由之前，否则API请求会被错误地转发到index.html。
• path.join(__dirname, 'build')用于适配不同操作系统的路径格式，避免出现路径错误。

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