部署在Firebase的React应用自定义URL路由异常问题求助

Root Cause #

Directly accessing subpaths like /casestudy or /process triggers a Firebase error prompt because Firebase Hosting attempts to locate a physical file at those paths instead of letting React’s client-side router handle the route. Navigation via the site navbar works because it uses React’s internal routing without reloading the page.

Fix Steps #

• Update Firebase Hosting Configuration
  Modify your firebase.json file to add rewrite rules that route all requests to your React app’s entry point (index.html):

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

  Ensure the public field points to your React build output directory (default is build for Create React App).

• Deploy the Updated Config
  Push the changes to Firebase using this command:

  firebase deploy
  

Additional Dev Environment Adjustment #

If your dev environment’s network requests are hardcoded to https://orioncruz.site/, add a homepage field to your package.json to use relative paths during development:

{
  "homepage": "."
}

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