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.
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?
after navigating to another page and refresh, my website working
Hey, we manage to throw vercel and netlify "Page Not Found", show some support🤗
Top comments (11)
Great job, Sakib! What about Render 🤔? I still can't figure it out how to solve this when deploying to render.com
you can try this one, not sure but may help
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 😁
it's worked for me thank you....
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.
Thank you
I was getting the same issue on Vercel and found your article as a solution.
Thank you!
Thanks mate, you're a life saver. After building a whole MERN stack project I was stuck on this for so long
in vercel.json ->
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
it also worked for me <3
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.
thank u brother