Скачать или смотреть Fixing 404 Not Found Errors When Routing on GitHub Pages

Learn how to troubleshoot and resolve routing issues on GitHub Pages, especially for Single Page Applications, with step-by-step instructions and solutions.
---
This video is based on the question https://stackoverflow.com/q/62483227/ asked by the user 'loozmax' ( https://stackoverflow.com/u/13518677/ ) and on the answer https://stackoverflow.com/a/62483490/ provided by the user 'Gnana Surya' ( https://stackoverflow.com/u/10655802/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Routing on github pages doesn't work. How do I fix it?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

If you have experienced frustrating 404 Not Found errors while using GitHub Pages, you are not alone. Many developers face issues with routing when refreshing a page or manually entering URLs in a Single Page Application (SPA) hosted on GitHub Pages. The good news is that there are solutions available to fix this problem! In this post, we will walk through a workaround that helps you maintain proper routing without encountering these pesky errors.

Understanding the Routing Issue

When your application works perfectly on localhost but returns a 404 when hosted, it usually relates to how GitHub Pages serves your files. Unlike traditional web servers, GitHub Pages does not support routing for SPAs out of the box. When a user tries to visit a sub-route directly (for example, /event), GitHub Pages attempts to find a corresponding HTML file for that path, which doesn't exist in the SPA setup.

Common Symptoms

403 Not Found: When the page is refreshed or the URL is entered manually.

Works on Localhost: The application runs smoothly when tested locally but fails when deployed.

Solution: Implementing a Workaround

To address the routing issue on GitHub Pages, follow these steps to add a workaround that enables proper routing for your SPA.

Step 1: Add a Script to Your index.html

In the public folder of your React application, locate or create the index.html file. Add the following script at the bottom, before the closing </body> tag:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Create a Custom 404.html Page

Next, you need to create a 404.html file in the public folder. The content of this file should be as follows:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Solution

Script Functionality: The script in the index.html ensures that if a user refreshes a page or enters a direct URL, GitHub will serve the 404.html page. Instead of displaying a standard 404 error, this page will retrieve the pathname and redirect back to the index.html, allowing your SPA to handle the routing correctly.

Segment Count: For project pages that aren't using custom domains, set segmentCount to 1 to only replace the route part of the path correctly.

Final Steps

Once you have implemented the above steps, ensure that you deploy your updated application to GitHub Pages. After deployment, try accessing different routes again. You should no longer encounter 404 Not Found errors and your routing will work seamlessly!

Conclusion

Routing issues on GitHub Pages can be resolved easily with a couple of scripts and a custom 404.html page. This workaround mimics a server-like environment for your SPA, ensuring users can access various routes without hurdles. By following these instructions, you can enhance your web application’s user experience and avoid common pitfalls associated with SPAs on GitHub Pages. Happy coding!