Getting 404 in GitHub Pages on redirection - reactjs

Question

I'm trying to learn how to use GitHub Pages with a basic React project. But I'm having an issue with the URL of the different pages of the project (like /home /about...).
I have a GH Page here: https://naacho20.github.io/itis/
If u try to use the navbar, a 404 would appear, but thats wrong because I have a Router redirecting that. I show my code so I can explain better:
App.js:
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import { BrowserRouter, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import About from "./pages/About";
import Portfolio from "./pages/Portfolio";
import Contact from "./pages/Contact";
export default function App() {
return (
<div>
<BrowserRouter>
<Navbar />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route path="/contact" component={Contact} />
</BrowserRouter>
</div>
);
}
Contact.js
import React from "react";
export default function Contact() {
return <div>Contact</div>;
}
Navbar.js
import React from "react";
import { withRouter } from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
const menuItems = [
{
to: "/",
title: "Inicio",
},
{
to: "/about",
title: "Sobre mí",
},
{
to: "/portfolio",
title: "Portfolio",
},
{
to: "/contact",
title: "Contacto",
},
];
class NavBar extends React.Component {
getNavLinkClass = (path) => {
return this.props.location.pathname === path ? "active" : "";
};
render() {
return (
<div>
<Navbar bg="dark" expand="lg" variant="dark">
<Navbar.Brand href="/">IT.IS</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
{menuItems.map((item, index) => {
return (
<Nav.Link
key={index}
className={this.getNavLinkClass(item.to)}
href={item.to}
>
{item.title}
</Nav.Link>
);
})}
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
NavBar = withRouter(NavBar);
export default NavBar;
So I see thats a problem from the URL, I see when I start the app, this goes to localhost:3000/itis and the Home page don't render, but if I remove the itis (localhost:3000/) it render the Home Page. I don't know what I'm doing wrong, any suggestion?
Ty.

Answer 1

This is because you are using SPA app so your all routes serving from one html file. You should use HashRouter to fix it. It is so simple you should import HashRouter instead of
BrowserRouter
import { BrowserRouter} from "react-router-dom";
to
import { HashRouter } from "react-router-dom";
and wrap it with your App
Also you have to wrap your Routes with Switch like this
<BrowserRouter>
<Switch>
<Navbar />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route path="/contact" component={Contact} />
</Switch>
</BrowserRouter>