ReactJS部署到Firebase Hosting后访问/about页面报404错误如何解决？

问题根因 #

你本地开发正常是因为React开发服务器默认将所有路由请求重定向到index.html，交由前端BrowserRouter处理路由逻辑。但Firebase Hosting默认会匹配服务器上真实存在的文件路径，你打包后不存在/about.html这类实体文件，因此直接访问或跳转该路径时就会返回404错误。

解决方案 #

方案1：修改Firebase配置（推荐，不改变路由格式） #

打开你项目根目录下的firebase.json文件，在hosting配置项中添加重定向规则，将所有请求都指向index.html，配置示例如下：

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

修改完成后重新执行firebase deploy部署即可生效。

方案2：替换为HashRouter（无需修改服务端配置） #

如果不想调整Firebase配置，可以把index.js里的BrowserRouter替换为HashRouter，路径会自动携带#前缀（例如/#/about），不需要服务端做重定向适配，路由逻辑完全由前端处理：

// 修改导入和使用
import { HashRouter as Router, Route } from "react-router-dom";

修改后重新执行npm run build打包，再部署到Firebase即可。

额外优化建议 #

可以使用react-router-dom提供的Link组件代替原生href跳转，避免触发整页刷新，提升用户体验：

import { Link } from 'react-router-dom';
// 替换原有Nav.Link写法
<Nav.Link as={Link} to="/about">About</Nav.Link>

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