DEV Community

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

Posted on

1 1 1 1 1

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up