React应用在DigitalOcean App Platform客户端路由404的解决方法

当直接访问React应用的子路由（如/auth/login）出现404，但应用内部导航正常时，核心原因是DigitalOcean服务器默认会尝试查找对应路径的静态文件，而单页应用（SPA）只有index.html这一个入口文件，所有路由逻辑都在客户端处理。以下是正确的解决步骤：

一、配置DigitalOcean App Platform路由规则 #

1. 登录DigitalOcean控制台，打开目标应用
2. 进入Settings页面，找到Static Sites板块（若应用为静态站点部署）
3. 在Routing Rules区域点击Add Rule，添加一条重写规则：
   • 来源路径：/*
   • 目标路径：/index.html
   • 动作选择：Rewrite
   • 状态码设置：200
4. 保存配置并触发应用重新部署

二、确保Vite项目配置正确 #

1. 在vite.config.js/vite.config.ts中确认base配置（根路径部署保持默认即可）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '/', // 子路径部署需对应调整为实际路径
  plugins: [react()],
})

2. 确保React Router使用BrowserRouter并正确定义路由：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/auth/login" element={<Login />} />
        {/* 其他路由定义 */}
      </Routes>
    </BrowserRouter>
  )
}

原理说明 #

• 直接访问子路由时，浏览器会向DO服务器发起对应路径的资源请求，服务器默认找不到匹配的静态文件，因此返回404
• 添加重写规则后，服务器会将所有路径的请求都返回index.html，由React Router在客户端解析路由并渲染对应组件
• 内部导航通过React Router的客户端路由机制实现，不会向服务器发送新请求，因此不会出现404

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