仅服务器端缺少页面，在 Firebase/React 应用程序中

Question

我有一个使用 Firebase 和 React 的小网络应用程序。

它在本地运行

http://localhost:3000/

并且有几个子页面，例如：

http://localhost:3000/login
http://localhost:3000/manage

到目前为止一切正常。然后我将我的页面上传到服务器（我已经做了几次），运行:

npm run build
firebase deploy

此时我可以访问服务器上的应用程序，正如预期的那样使用一些 link，例如：

https://myapp.web.app/

但我后来遇到了问题，在浏览器中尝试这些 URL（对于某些子页面）：

https://myapp.web.app/login
https://myapp.web.app/manage

我得到这个结果，表明某些页面肯定丢失了：

404
Page Not Found

The specified file was not found on this website. Please check  the URL for mistakes and try again.
Why am I seeing this?

This page was generated by the Firebase Command-Line Interface.     To modify it, edit the 404.html file in your project's  configured public directory.

我检查了我的 firebase.json 文件，该行出现在“托管”部分：

"public": "build",

知道后，有经验的 Firebase/React 用户会立即想到一些可能的问题，而我可能会遗漏这些问题吗？

Answer 1

您的问题可能是因为您初始化项目并将其设置为不是 SPA。

像这样设置您的 firebase.json 文件：

{
"hosting": {
    "target": "This is when you need target",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

SPA 最重要的是 "rewrites" 部分。当你使用浏览器打开主页时，请求看起来像这样 example.web.app/index.html 即使你写了 example.web.app 并且当你请求 example.web.app/manage 请求看起来像 example.web.app/menage/index.html 实际上你没有此文档，因此您需要设置托管以将所有请求重写到此 index.html 文档。

仅服务器端缺少页面，在 Firebase/React 应用程序中

Pages missing on the server side only, in a Firebase/React app

reactjs

firebase-hosting