19

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

  1. https://github.com/websemantics/gh-pages-spa
  2. https://github.com/rafgraph/spa-github-pages

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

1

4 Answers 4

14

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

3

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.

3

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>
);
1
  • 1
    This indeed fixed my issue. Thanks. 8 hours ago
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.