Menu
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.
265
To integrate Firebase into our React app, we need to first get the web configuration object and then use it to initialize Firebase in our react app. Copy the config to the clipboard; we'll need it later on to initialize Firebase. Then, click Continue to console to complete the process.
This feature has been deprecated because the new structure of Routes is that they should act like components, so you should take advantage of component lifecycle methods instead.
Facebook uses React for small parts of its main page. There are some apps built fully with React, but it's not common at FB.
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"
}
}
Late answer, but I'm facing with the same issue. I solved this with 2 steps:
{
"hosting": {
"site": "myproject",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
.
.
.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
