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!