英文:
Rewrites rule configured, but React Router routes still result in 404 when deployed on Firebase Hosting
问题
我有一个使用React Router进行客户端路由的React应用程序。在本地，路由正常工作。但是，当我部署应用程序到Firebase Hosting时，当我尝试重新加载页面或直接访问特定路由时，我遇到了404错误。在应用程序内部通过点击链接进行导航时，应用程序的路由正常工作。
我已确认Firebase部署成功，并且最新版本的应用程序已经部署。
我已检查了firebase.json文件中的Firebase Hosting配置，其中包括以下重写规则以处理所有请求，将它们指向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"
}]
}
在运行Web应用程序时，控制台中没有错误消息，构建和部署时终端中也没有错误消息，我没有注意到任何其他可疑的事情，页面在其他方面似乎运行正常。我真的不知道可能是什么问题，将不胜感激地接受任何帮助以解决这个问题！
编辑：在Firefox的“网络”选项卡中检查也没有发现任何问题。这也与嵌套路由无关 - 与/login一样，/user/boardname在重新加载时也会得到404错误。
英文:
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.
答案1
得分: 0
错误只是我在忽略规则之后添加了重写规则，显然这意味着它被忽略了。现在它可以工作：
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
}
}
英文:
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"
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论