Fixing the "Page Not Found" Error on Netlify , vercel for any Router.🚀

If you've built a Single Page Application (SPA) with React and React Router, you might have noticed everything works fine locally with npm or yarn. However, after deploying to Netlify, you encounter a "Page Not Found" error when navigating directly to non-root pages (e.g., https://yoursite.netlify.com/login).

Understanding the Issue

React Router handles routing on the client-side (in the browser), while Netlify handles routing on the server-side. When you access a non-root URL directly, Netlify doesn't know how to handle the route, resulting in a "Page Not Found" error.

Solution

To resolve this, Netlify allows you to use a special file called _redirects. This file instructs Netlify to serve the index.html file for all routes, allowing React Router to handle the routing.

Steps to Fix the Error

1. Create the _redirects File: In the root of your site (usually the public folder), create a file named _redirects with the following content:

   /* /index.html 200

1. Deploy Your Site: After adding the _redirects file, build your site and deploy it to Netlify again.

Example

Here is an example of the _redirects file content:

/* /index.html 200

Additional Resources

• Netlify Documentation on History Pushstate and Single Page Apps
• Source Code with _redirects File on GitHub
• Live Example Site with _redirects File

By following these steps, your React Router-based SPA should handle client-side routing correctly after deployment to Netlify.

For more detailed guidance, you can refer to the official Netlify documentation on redirects and rewrites.

Happy coding! 🚀