为 Webpack 生产环境实现历史 API 回退

Question

我的堆栈是React/Redux作为前端，React Router v4和Firebase Hosting作为后端。

像许多其他人一样，我也面临着当用户刷新根 URL 以外的页面(如 https://example.com/about 或手动键入 URL https://example.com/about(时找不到 404 页面的问题。

我研究了许多网站，哈希浏览器似乎是解决此问题的方法，但它不是一个完整的解决方案。它不会将用户带到正确的页面，而是呈现根 URL 组件。不够好。使用historyApiFallback：对于生产环境来说，true似乎也是一个坏主意。

我看到了这个包，连接历史 api 回退，但它似乎适用于快速应用程序。

如何在使用 Firebase 托管我的网站时在我的 React 应用中实现此软件包？还是有其他解决方案？

Answer 1

我找到了解决方案。这仅适用于部署 React 应用的用户，使用 Firebase Hosting 来托管您的单页应用程序。(也应该适用于 Angularjs/Vuejs(

首次运行 firebase init 时，他们会询问您是否要配置为单页应用，请确保选择"是"。最终结果是他们会将此部分写入您的 firebase.json 文件，

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

它的工作原理与拥有相同

devServer: {
    historyApiFallback: true
},

以将所有 URL 重定向到应用程序的根 URL，.js 文件。("/")

Firebase.json 文件的完整实现可能如下所示，

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

如需了解详情，请参阅Firebase部署配置文档。