React+TypeScript部署Vercel后刷新页面报错求解决方案

• 核心原因：React单页应用（SPA）采用前端路由机制，刷新页面时浏览器会直接向Vercel服务器请求对应路径的资源，但服务器上不存在该路径的静态文件，因此返回404类报错。

• 解决方案1：配置Vercel路由回退规则
  在项目根目录创建vercel.json文件，添加以下配置：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }
  

  该配置会将所有请求重定向到index.html，交由React前端路由处理路径匹配与页面渲染。

• 解决方案2：检查React路由配置（以react-router为例）
  确保使用BrowserRouter而非HashRouter（若偏好Hash模式可忽略此条），同时路由路径规则配置正确：

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  import Home from './pages/Home';
  import About from './pages/About';
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* 其他业务路由 */}
        </Routes>
      </Router>
    );
  }
  

• 验证操作

  1. 保存vercel.json后重新部署到Vercel
  2. 刷新页面或直接访问子路径，确认报错消失

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