One way you can try to fix this is by replacing Switch with HashRouter in your App.js . This will change your URLs, but it should fix your 404 issue for github pages. If you need a more in depth explanation of why this happens read this reply.

So your updated App.js should look like this:

import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";
import Emoji from "react-emoji-render";
import "./App.css";
import Projects from "./Projects.js";
import About from "./About.js";
import Critterpedia from "./Critterpedia.js";
import Bluenotes from "./Bluenotes.js";
import Formally from "./Formally.js";
import visualize from "./Images/visualize-actualize.png";
import ScrollToTop from "./ScrollToTop.js";

class App extends Component {
  render() {
    return (
        <ScrollToTop />
          <Route exact path="/" component={Projects} />
          <Route path="/about" component={About} />
          <Route path="/critterpedia" component={Critterpedia} />
          <Route path="/bluenotes" component={Bluenotes} />
          <Route path="/formally" component={Formally} />

        <div className="footer">
          <div className="emoji">
            <Emoji text="💭" />

          <div className="intro-icon">
            <div className="img-div">
              <img src={visualize} alt="visualize and actualize" />

          <div className="credit">
            <div className="footer-links">
              <a href="">GitHub</a>
              <a href="">
              <a href="">Twitter</a>
              Made with <Emoji text="🖤" />
              by Christine Lin

export default App;

Let me know if this works for you


To get this to work, all I did was add a step to my GitHub Pages deploy pipeline that copies index.html to 404.html and then let my router handle the rest.

Note that this will still result in the routes returning a 404 status so SEO or CLI pings will think that requests failed.


I've spent quite some time to fix this issue. The issue is that GitHub Pages doesn't support single page apps, so there is a 404 error when refreshing page.
Check this out and follow instructions, it is pretty straightforward. I've followed "basic instructions", but take a look at step 5 in "detailed instructions", that helped me fix it completely (adding repo name to absolute path of assets in index.html and setting segmentCount to 1).
Take a look at my code . I haven't used HashRouter, I've used Switch. And also I've added 404.html file.
I hope this helps

Related Query

More Query from same tag