I have a React application that uses React Router for client-side routing. Locally, the routing works correctly. However, when I deploy the application to Firebase Hosting, I encounter a 404 error when I try to reload the page or directly access a specific route. The application's routing works fine when navigating within the application by clicking on links.
I have confirmed that the Firebase deployment is successful and that the latest version of my application is deployed.
I have checked the Firebase Hosting configuration in the firebase.json file, and it includes this rewrite rule to handle all requests with index.html:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}]
}
There are no error messages in the console when I'm running the webapp, or in the terminal when I'm building and deploying it, or anything else that I've noticed being fishy, and the page seems to work perfectly fine otherwise. I really have no idea what this could be, and would appreciate any help I can get figuring it out!
edit: checking the "Network" tab in Firefox also doesn't reveal anything. It is also not an issue having to do with nested routes - /login gets a 404 on reload just like /user/boardname does.
The error was simply that I'd added the rewrite rule after the ignore rule, which apparently means it gets ignored. It now works:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]},
"storage": {
"rules": "storage.rules"
}
}