ReactJS: Getting 404 when a /about page is opened
Question
This is the first time I'm deploying a React Web App to the firebase hosting. In my index.html file I only have the root div:
<body>
<div id="root" class="container"></div>
</body>
That's all there is in the body. Then I have an index.js in the src folder in which I have:
import { BrowserRouter as Router, Route } from "react-router-dom";'
import HomeScreen from "./screens/HomeScreen";
import AboutScreen from "./screens/AboutScreen";
...
ReactDOM.render(
<Router>
<div>
<Route exact path="/" component={HomeScreen} />
<Route exact path="/about" component={AboutScreen} />
</div>
</Router>,
document.getElementById("root"))
Then to open the about page I have linked it as:
import { Container, Nav, Navbar } from 'react-bootstrap';
...
<Nav.Link href="/about">About</Nav.Link>
When I do npm run build and then firebase deploy it deploys and I can see the changes on the home page. But when I click on about it gives me 404
I have the folder named build which is the public folder and after the build, it only has index.html and 404.html and a static/js folder that has some generated js and txt .
So, I'm not sure why I'm getting 404. In dev build ie localhost the navigation works fine.
2 answers
solution1
0 2021-11-01 19:50:26
That is because it is a static deployment of a single index.html , about.html does not exist, you can only access to the index.html, and the other views "doesn't" because is a single-page-application, but you can redirect all URL other than "/" to the index.html file, editing the firebase.json
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
solution2
0 2021-11-01 20:15:17
For single page applications, redirect rules must be specified. Every routes should be redirected from index.html file
You need to specify the deployment directory being deployed and the redirect rules
This is my react app being deployed to firebase hosting alongside firebase functions
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}
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.