React与Node.js单端口部署时前端动态路由刷新返回404如何解决

核心思路：统一后端接口前缀和前端路由做区分，所有非接口请求兜底返回React打包后的入口文件，前端拿到页面后自行匹配路由、拉取对应数据即可，具体操作步骤如下： #

1. 统一后端接口前缀 #

把所有后端接口的路径都增加/api前缀，和前端路由做隔离：

• 你原来获取笔记数据的接口如果是GET /:unique-id，调整为GET /api/note/:unique-id
• 同步修改React端useEffect中的请求地址，替换为带/api前缀的路径

2. 配置Node服务路由兜底 #

如果你用Express作为后端服务 #

按「API路由 > 静态资源 > 兜底路由」的顺序编写服务逻辑，代码示例：

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

// 1. 优先处理所有API请求
app.get('/api/note/:uniqueId', (req, res) => {
  // 此处保留你原来返回笔记数据的逻辑即可
  res.json({
    id: req.params.uniqueId,
    content: '对应笔记内容'
  })
})

// 2. 配置静态资源指向React打包后的build文件夹
app.use(express.static(path.join(__dirname, 'build')))

// 3. 兜底路由：所有非API、非静态资源的请求都返回React入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

app.listen(3001, () => console.log('服务运行在3001端口'))

如果你用Koa作为后端服务 #

逻辑和Express一致，代码示例：

const Koa = require('koa');
const path = require('path');
const static = require('koa-static');
const Router = require('koa-router');
const fs = require('fs');
const app = new Koa();
const router = new Router();

// 1. 优先处理所有API请求
router.get('/api/note/:uniqueId', async ctx => {
  // 此处保留你原来返回笔记数据的逻辑即可
  ctx.body = {
    id: ctx.params.uniqueId,
    content: '对应笔记内容'
  }
})

// 2. 配置静态资源指向React打包后的build文件夹
app.use(static(path.join(__dirname, 'build')))

// 3. 兜底路由
router.get('*', async ctx => {
  ctx.type = 'html';
  ctx.body = fs.createReadStream(path.join(__dirname, 'build', 'index.html'))
})

app.use(router.routes())
app.listen(3001)

3. 前端逻辑无需修改 #

配置完成后，react-router会在页面加载完成后自动匹配当前路径的动态路由，提取url中的unique-id，你原来写的useEffect拉取数据的逻辑可直接复用。
此时直接访问、刷新localhost:3001/[unique-id]路径都会先返回前端页面，再自动拉取对应数据，不会再出现404问题。

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