Firebase hosting with react router
Question
I have a react app that uses react-router with a Router that looks like:
<Router>
<div>
<Route exact path="/" component={Homepage} />
<Route path="/map/:uid" component={Userpage} />
<Footer />
</div>
</Router>
The app is hosted using Firebase hosting.
If I open my website and click around such that the router takes me to /map/uid, it loads fine. But if I close the browser and then try to explicitly navigate to <domain>/map/<known uid> , I get a "no page found" page from Firebase. This is my first time using react-router.
Update #1
I have updated my firebase.json to:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I no longer receive the "Page not found" page; however, the content of my react app never loads, and I notice in my console an error:
Uncaught SyntaxError: Unexpected token <
Update #2
I now understand why I am getting the error. Looking at the Sources tab in Chrome dev tools, my static/ folder has a strange name ( static/css rather than static ) only when I directly navigate to /map/{known uid} . When I navigate to the home page, all loads fine.
This explains the error. I am still not sure how to fix.
7 answers
solution1
42 2019-05-16 18:59:36
For me I could see the root url but other routes like "/pricing" were giving me a 404. I added this to my firebase.json file and now it works. Also make sure firebase/auth is allowed to work on the domain. There is a setting in the auth section of firebase.
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
My full firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
}
}
solution2
6 2021-01-14 16:35:10
Late answer, but I'm facing with the same issue. I solved this with 2 steps:
- update firebase.json like this
{ "hosting": { "site": "myproject", "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
- set the base url in index.html like this
<!DOCTYPE html> <html lang="en"> <head> <base href="/"> . . .
solution3
2 2019-09-11 18:23:12
派对迟到了，但尝试从你的 package.json 中删除“主页”键（或确保它相对于主页的存储位置是正确的。
solution4
1 2021-05-04 22:02:43
Late answer, but it solved the problem for me: When doing firebase init it will ask whether it will be Single Page App or no. Default answer is No , however, just choose Yes and it will work.
solution5
1 2022-02-17 07:15:53
You're getting this error because of client-side routing. (Deep inside React)
- When building the react app in the build(folder) you see only one index.html file.
- when you hit URL with YOUR_DOMAIN/map Now firebase is trying fetch build->map->index.html but is present in your build folder.
So you can do
- Are you can use react-router-dom. After building application build folder , index.html you can mention
<base href="/"/>.
solution6
0 2022-01-04 22:30:21
I also have issue with rewrites, according to info in this post i added:
"rewrites": [ { "source": "**", "destination": "/index.html" } ]
and
but when i try to acces in production: mydomain.com/someInfo
i get: mydomain.com/index.html
Adrian
solution7
0 2022-06-07 21:31:38
Try setting the cleanUrls property to true .
See Firebase docs for more info
"hosting": {
// ...
// Drops `.html` from uploaded URLs
"cleanUrls": true
}
solution8
-1 2018-03-16 20:57:41
What about specyfying the basename in Router ? Something along this:
<Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.