This happens because Vercel needs to be told to always serve index.html for routes in Single Page Applications (SPA). By default, Vercel tries to look for a physical file at the path but React uses the same index.html for all routes.

To fix this issue, add a rewrites rule in the vercel.json file to make sure the index.html is always served.

Create or update vercel.json at the root of your project

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

Deploy the changes to Vercel, and now your app should work fine when you refresh or directly access any route.

This ensures Vercel will serve index.html for all requests, allowing React Router to take care of routing.