Search code examples
javascripthtmlreactjsfirebase-hosting

ReactJS: Getting 404 when a /about page is opened

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

404 error picture

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 i.e. localhost the navigation works fine.

Solution

  • 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"
} ]