How to solve Vercel and Netlify "Page Not Found" after page refresh [SOLVED]

Worst Worst Worst. What?

You obviously deployed your React App in vercel or netlify right? If you are using react-router then you must face the shitty Page Not Found page.

Netlify not found page

Why this page shows us when we don't like it? Huh, there are a simple reason for this. When you use a React Router in your application and navigate to another page and reload your site, it give as "Page Not Found". Even, your 404 page doesn't work. Am I right? Let me know in the comment below.

How to solve this?

To fix this error whenever you are either trying to access your app or you're on other routes, you have to set up a redirect and rewrite rules for your react-router application. The redirect rule will help your application avoid "Page Not Found".

I will show you both in vercel and netlify. 1 shot 2 Kill.

For NETLIFY

Add a _redirects file in your public folder. In my case, I'm using react + vite. I added _redirects file in the public folder.

now copy paste this code to _redirects file.
/* /index.html 200

Boom, done.

For VERCEL

Create a file named vercel.json in the root folder of your project.

now again copy paste.

{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/"
        }
    ]
}

Boom, done x2

result?

My 404 page working😵

after navigating to another page and refresh, my website working

Hey, we manage to throw vercel and netlify "Page Not Found", show some support🤗