React website only shows the landing page when deployed to Github Pages

Hi,

I have deployed a React website to Github Pages. Problem is that only the landing page is working and every other page gives an “404 file not found” error. The website is working fine on localhost.

Github project: https://github.com/Gnabriel/ethereum-pos-prototype

Website https://gnabriel.github.io/ethereum-pos-prototype/ is working but redirects to https://ellebrink.me/ethereum-pos-prototype/app/dashboards/overview  which does display the page BUT if you refresh that page you will get the 404 error.

If you click on the “Become a validator” button and try to go to the next page you will, again, get the 404 error. This button redirects to https://ellebrink.me/app/dashboards/generate which I think is incorrect. I guess it should be something like https://ellebrink.me/ethereum-pos-prototype/app/dashboards/generate.

I followed this guide on how to deploy my React app to Github Pages.

In my package.json, should I use 

"homepage": "https://Gnabriel.github.io/ethereum-pos-prototype/"

or

"homepage": "https://ellebrink.me/ethereum-pos-prototype/"

since I am using a custom domain?

I have very little knowledge of React and this website is built with a complete React theme with many frameworks that I do not understand. From my research I think the problem lies with the routing of the website.

Can you confirm if the problem is with the routing and if so, guide me on how to fix it?

Huge thanks in advance!

1 Like

Hi, @gnabriel!

You’re spot on that the trouble here relates to routing. While your local development environment includes a web server that supports React’s single page routing, GitHub Pages does not provide this support natively. Instead, GitHub Pages takes a more traditional approach to routing: when a URL is requested, it checks to see if whether a real, dedicated file exists at that path. If no such file exists, a 404 error is returned. No opportunity is afforded to React’s router to intervene and render a particular component.

There are various approaches to navigating this, including the use of alternative routing implementations in React, or an intervention on the GitHub Pages side using a custom 404.html page that defers back to React’s router. Both options are discussed in the create-react-app documentation here:

https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing

As for the homepage value in your package.json file, I would recommend always using the URL at which the site will be published. In your case, that would be your custom domain.

I hope that helps!

Friday

1 Like