React/Redux+Firebase Hosting环境下history-api-fallback实现方案求助

嘿，我完全懂你遇到的这个头疼问题——React Router单页应用在Firebase Hosting上刷新非根路由就跳404，确实挺烦人的。我之前也踩过这个坑，给你几个靠谱的解决方案，不用折腾connect-history-api-fallback（毕竟那个是给Express用的，Firebase Hosting有自己的原生配置方式）：

Firebase Hosting本身就支持路由重写，能把所有请求都转发到你的index.html，让React Router接管路由解析。具体步骤：

1. 打开项目根目录的firebase.json文件（如果没有，先通过firebase init hosting生成）
2. 在hosting字段里添加rewrites规则：

{
  "hosting": {
    "public": "build", // 你的React编译产物目录，一般是build或dist
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 这个规则的作用是：不管用户访问什么路径（比如/about、/profile），都会被转发到index.html，React Router就能正确识别URL并渲染对应的组件，刷新或手动输入非根URL再也不会404了。
4. 最后执行firebase deploy部署，规则就会生效。

别用HashRouter（它会给URL加#，体验不好），改用BrowserRouter，并且根据部署路径正确设置basename：

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

function App() {
  // 如果是create-react-app项目，process.env.PUBLIC_URL会自动匹配部署路径
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        {/* 其他路由组件 */}
      </Switch>
    </Router>
  );
}

如果你的应用部署在子路径（比如https://example.com/my-app），basename要设为"/my-app"；根域名部署的话可以省略。

你说的没错，connect-history-api-fallback是Express的中间件，用来在Node.js服务器上处理HTML5 History API的回退逻辑。但Firebase Hosting是静态托管服务，不需要你自己运行Express服务器，所以这个包在这里派不上用场。Firebase的重写规则就是专门干这个事的，比第三方中间件更适配它的平台。

• 部署前一定要先编译React项目：执行npm run build（create-react-app项目），确保build目录里是最新的静态文件。
• 静态资源（图片、CSS等）要使用相对路径，或者在public/index.html里用%PUBLIC_URL%引用，避免路径错误。

我自己用这个方法在多个Firebase托管的React项目里试过，完全解决了刷新非根URL的404问题，你可以放心试试。

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