DEV Community

Cover image for Fixing the "Page Not Found" Error on Netlify , vercel for any Router.πŸš€
Dharmendra Kumar
Dharmendra Kumar

Posted on

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).

1gqrczaiuoe1z56bqs7k

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.

ht5qi8lwjs76n01k1bsu

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
Enter fullscreen mode Exit fullscreen mode

epeksgiopepz313hhwmq

  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
Enter fullscreen mode Exit fullscreen mode

1ldcwihz70l002cq91km

Additional Resources

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! πŸš€

Top comments (0)