Getting 404 in GitHub Pages on redirection

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.

By the 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> ` — Furkan
Yes, I just found this thanks to your answer medium.com/@arijit_chowdhury/… and thats explain too. If u want, write an answer with that so I can vote as best answer — iMSn20
But if I use Switch, no one route matches so any page renders. — iMSn20
I dont know it should work because it renders first match. Whever you navigate to /about your About component will be matched and rendered. — Furkan

Furkan Furkan · Accepted Answer · 2021-04-10T23:42:14

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>

Getting 404 in GitHub Pages on redirection

1 Answers