I created this reactjs app with vite, added a route and authentication hosted it on vercel. My problem now is, when I refresh the page when am in another route that is not the homepage e.g.: "site.com/login" I get the 404: NOT_FOUND from vercel.
Note: This does not happen locally, only when the site is live on vercel.
The problem you're running into is pretty common when you're deploying a single-page app like React on a static hosting service. When you refresh a page on a route that's not the homepage, the server gets confused. It tries to find a specific file for that route, like a login.html for a /login route, but it can't find it, so it shows a 404 error.
To fix this on Vercel, you can create a configuration file called vercel.json in your project's root directory. Inside this file, you can specify how Vercel should handle the routing for your app. Here's what you can put inside that file:
{
"routes": [
{
"src": "/(.*)",
"dest": "/index.html"
}
]
}
This tells Vercel to redirect all routes to your index.html, so your React app can then handle the routing as it does locally. After adding this file, redeploy your app, and the 404 issue should be resolved.