DEV Community

Cover image for How to solve Vercel and Netlify "Page Not Found" after page refresh [SOLVED]
Sakib Ahmed
Sakib Ahmed

Posted on

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
devvsakib article

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.

devvsakib

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.

devvsakib

now again copy paste.



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


Enter fullscreen mode Exit fullscreen mode

Boom, done x2

result?

My 404 page working😵
Image description

after navigating to another page and refresh, my website working
Image description

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

Top comments (11)

Collapse
 
theksbd profile image
Đỗ Thiện Hoàng

Great job, Sakib! What about Render 🤔? I still can't figure it out how to solve this when deploying to render.com

Collapse
 
devvsakib profile image
Sakib Ahmed

you can try this one, not sure but may help

Image description

Collapse
 
theksbd profile image
Đỗ Thiện Hoàng

Thanks for your help! But I have tried that too 😅 I guess I will just stick to Vercel for Frontend and Render for only Backend 😁

Collapse
 
ankitbisen28 profile image
Ankit Bisen

it's worked for me thank you....

Collapse
 
freelancernizamc profile image
Md Nizam Uddin

Good job but If i create 4 page website by tailwind, how can i solve this problem? Please help. In netlify only index.html file show.

Collapse
 
jalalbmnf profile image
jalalbmnf

Thank you

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

I was getting the same issue on Vercel and found your article as a solution.
Thank you!

Collapse
 
samareshdas profile image
Samaresh Das

Thanks mate, you're a life saver. After building a whole MERN stack project I was stuck on this for so long

Collapse
 
sadik_farhan profile image
Farhan Sadik

in vercel.json ->
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

it also worked for me <3

Collapse
 
ashishkuldeep23 profile image
Ashish kuldeep

That was a very useful post bro, thank you so much. I faced the same problem and I used hashBrowserRouter to solve the problem but your solution is great.

Collapse
 
cashtag7_33 profile image
Md. Noman Ebeny Shahid

thank u brother