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
– Furkan, Commented Apr 10, 2021 at 23:36
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
– iMSn20, Commented Apr 10, 2021 at 23:37
But if I use Switch, no one route matches so any page renders. — iMSn20
– iMSn20, Commented Apr 10, 2021 at 23:39
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, Commented Apr 10, 2021 at 23:45

Furkan · Accepted Answer · 2021-04-10 23:42:14Z

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>

answered Apr 10, 2021 at 23:42

Furkan

852 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

iMSn20 Over a year ago

Ty, but now I have a problem, if I use a Switch, the url don't have matches so only render the Navbar but none page. I have exactly like you send

Furkan Over a year ago

Can you share the answer if you solve this problem. I really wonder what is wrong with the code. It seems all fine.

iMSn20 Over a year ago

I voted your answer before putting the Switch. It isn't working.

iMSn20 Over a year ago

I created a new project to see something that I found weird in my actual project. When I run npm start the terminal say something like this: You can now view miportafolio in the browser. Local: http://localhost:3000/itis On Your Network: http://192.168.0.187:3000/itis That final itis look weird to me, so when I created a new project the terminal don't use the name of the folder where I have the project. I think is that, because in the browser its start on http://localhost:3000/itis and not in http://localhost:3000.

Collectives™ on Stack Overflow

Getting 404 in GitHub Pages on redirection

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related