If you have ever used Netlify to host a React application, chances are that you have encountered the above bug. In this article, I will show you a quick way to resolve this.
This particular bug above gave me quite a lot of headaches while working on this project (hosted with Netlify).
In a Single Page Application (SPA) like React, there is only one HTML page (hence the name SPA), therefore all routing is handled dynamically with JavaScript (on the frontend). This results in a 404 page when Netlify tries to handle your routes as server-based routing.
To resolve this, add a file named _redirects without any file extension in the public folder. The file should have the following as its content:
/* /index.html 200
Note: the above solution only works for existing routes. If a user tries to access a route that doesn't exist in your application, it will still redirect to a 404 page.
You can read more about client-side routing here.
Thanks for reading!