404 Error on refresh with SPA React Router app in GitHub Pages

Question

I built my website with React and React Router and it is hosted on Github Pages. When I refresh the site on a page that is not my home page OR do ctrl+click to open the page in a new tab, it leads to a 404 error. I know this is because Github pages doesn't have access to front-end routes and one solution is to add a 404.html file that redirects back to your index.html.

I tried following the instructions on both

but neither worked for me. I think I am missing something but I can't figure out what is going wrong as I'm not that familiar with React Router. Can anyone help? (Note: I know a solution is to use HashRouter but I don't want my URLs to look ugly)

My code can be viewed on GitHub: https://github.com/christinexlin/portfolio

Does this answer your question? [Is there a configuration in Github Pages that allows you to redirect everything to index.html for a Single Page App?](https://stackoverflow.com/questions/36296012/is-there-a-configuration-in-github-pages-that-allows-you-to-redirect-everything) — Nick Roz, Sep 07 '21 at 15:15

score 12 · Answer 1 · answered Aug 19 '20 at 17:53

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 https://github.com/rafgraph/spa-github-pages 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 https://github.com/milosrancic/reactjs-website . I haven't used HashRouter, I've used Switch. And also I've added 404.html file.
I hope this helps

score 2 · Answer 2 · edited Aug 13 '22 at 17:43

I also have the same issue and waste a lot of time to fix it, but when I found that the solution is just on keywords i was surprised, so here is the solution:

goto your react project where you have defined your routes and replaced BrowserRouter with HashRouter.

In my case, I have defined routes in this way

Before Error Resolve

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

After Error Resolve

After Replacing BrowserRouter with HashRouter it works fine for me and the code after changes is like this:

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HashRouter>
        <App />
    </HashRouter>
);

score 1 · Answer 3 · answered Sep 24 '21 at 01:56

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.

score 0 · Answer 4 · answered Aug 18 '20 at 08:51

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";
//Pages
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";
//Components
import visualize from "./Images/visualize-actualize.png";
import ScrollToTop from "./ScrollToTop.js";

class App extends Component {
  render() {
    return (
      <div>
        <ScrollToTop />
        <HashRouter>
          <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} />
        </HashRouter>

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

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

          <div className="credit">
            <div className="footer-links">
              <a href="https://github.com/christinexlin">GitHub</a>
              <a href="https://www.linkedin.com/in/christine-lin-01/">
                LinkedIn
              </a>
              <a href="https://twitter.com/christinexlin">Twitter</a>
            </div>
            <p>
              Made with <Emoji text="" />
              by Christine Lin
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Let me know if this works for you

404 Error on refresh with SPA React Router app in GitHub Pages

4 Answers4