使用Node Express为后端部署ReactJS生产构建包非首页路由404问题求助

问题本质 #

你遇到的是单页应用前端路由的服务端适配问题：

• create-react-app生成的项目默认使用BrowserRouter实现前端路由，所有路由逻辑都在前端入口文件index.html中执行
• 开发环境的webpack devServer默认开启了historyApiFallback配置，所有未匹配到静态资源的请求都会自动返回index.html，所以路由访问正常
• 生产环境仅配置静态资源映射时，直接访问非首页路由会触发Express的静态资源查找逻辑，对应路径不存在就返回404

修复方法 #

方法一：配置Express路由 fallback（推荐，URL无冗余字符） #

在所有Express接口路由、其他中间件的最后位置添加如下代码，所有未匹配到的请求都会返回index.html，将路由控制权交给前端：

1. 首先引入node内置path模块：

const path = require('path');

2. 添加fallback逻辑：

// 注意路径要和你项目中build文件夹的实际存放位置匹配
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});

配置完成重启Express服务即可生效。

方法二：改用HashRouter（无需修改后端配置） #

如果不想调整Express代码，可以将React的路由模式改为哈希路由，所有路由路径会携带/#/前缀，服务端只会解析哈希符号前的路径，永远返回index.html，由前端自行处理路由逻辑：
修改React项目的路由入口代码：

// 将原本的BrowserRouter替换为HashRouter
import { HashRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <HashRouter>
    <App />
  </HashRouter>
);

修改完成后重新执行npm run build，将新的build文件夹替换到Express项目中即可生效。

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