React项目部署Firebase后路由刷新404，本地正常，如何解决？

问题描述 #

• 编辑：该问题并非仅存在于动态路由，普通路由刷新时也会返回404。
• 线上版本情况：可正常加载首页，搜索证书并进入证书展示页面，但刷新页面时出现404错误。
• 本地运行应用时，路由无404问题。
• 使用Firebase部署该应用。
• 已查阅相关帖子并尝试本地部署验证，本地部署刷新返回304而非404，但该操作对线上版本无帮助，怀疑是BrowserRouter的配置问题？

App.js

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

function App() {
  return (
    <div>
      <Header/>
      <Routes>
        <Route path="/login" element={<Login/>} />
        <Route path="/search" element={<CertificateSearch/>}/>
        <Route path="/:id" element={<CertificateDisplayPage/>}/>
      </Routes>
      <Footer/>
    </div>
  );
}

export default App;

index.js

import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

解决方案 #

这不是BrowserRouter的代码配置问题，而是Firebase Hosting的服务器规则配置问题。使用前端路由时，刷新页面服务器会尝试查找对应路径的静态文件，但这些路径仅由前端路由定义，服务器上不存在对应文件，因此返回404。

需要配置Firebase的重写规则，让所有请求都指向index.html，由前端路由接管处理：

1. 在项目根目录创建或编辑firebase.json文件
2. 添加rewrites配置：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 重新部署应用到Firebase：

firebase deploy --only hosting

配置完成后，所有请求都会转发到index.html，前端路由即可正确处理刷新后的路径，解决404问题。

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