I recently completed a project(cinemaxtv.vercel.app), which is a movie application. After deploying the application on Vercel, I noticed an unusual issue. Whenever I navigate to a different page and refresh that specific route, I encounter a 404 Not Found Error, indicating that the specified route cannot be found. However, I achieve the desired result when I perform the same action on my local host. Consequently, I deduced that the error is likely due to a deployment glitch on Vercel.

A pictorial display of the 404 not found error above

After conducting some research, I discovered a solution for resolving this issue. To rectify the 404 Not Found Error, it is necessary to establish redirect and rewrite rules for your React Router application. These rules will assist your application in circumventing the "Page Not Found" error.

To begin, generate a vercel.json file in the root directory of your project. This file will enable Vercel to configure the routing accurately, and you should insert the following code snippet in the image below.

This image represents the structure of the vercel.json file and the code snippet.

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

The provided code snippet instructs Vercel to rewrite any incoming URL path to the root path. This configuration ensures that when we initiate a redirect with a child path, Vercel will redirect it to the root path, effectively preventing the occurrence of the 404 Not Found Error.

If your project has already been deployed, push the changes to your GitHub repository and refresh the page, you will obtain your desired result seamlessly, without encountering any issues.

voila! It now works.

Conclusion
If you find this article interesting, please consider liking and sharing it. Additionally, I welcome your thoughts and feedback in the comment section below. Thank you for your engagement.

Open to work🙂
Did you enjoy this article or need an experienced Technical Writer / React Developer for a remote, full-time, or contract-based role? Feel free to contact me.
Github || Linkedin || Twitter