Solution:

As a front-end or full stack developer, you might have used vite.js which is a very fast framework to deploy and build your project. When the project is deployed online to either vercel or netlify, you observed that directly calling up a path from the browser emits 404 error but when you click from the menu back or another link from the project, the path opens. This is not a problem with vite.js but due to a missing configuration file for vercel which is added by default to the existing templates. For a single page application, the html files for the routes created with react router don't exist, so the server creates rewrites to ensure every request points at '/' or index.html. In Vercel this can be done by adding a rewrite to config file in the root of the project called vercel.json

Procedure

1. Create a file named vercel.json or netlify.json in the root of your project.
2. add the code snippet below if it is a single-page vite project. If it is multiple pages use the next code.

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

1. This example is for a five-page vite.js project. Edit to suit your url naming.

{ "rewrites": [ { "source": "/", "destination": "/" }, { "source": "/(.*)", "destination": "/"}, { "source": "/create", "destination": "/create" }, { "source": "/live", "destination": "livel" }, { "source": "/dashboard", "destination": "/dashboard" }, { "source": "/profile", "destination": "/profile" }, ] }

Source: https://vercel.com/docs/configuration