DEV Community

Cover image for React Router Not Working on Vercel?
Arindam Majumder
Arindam Majumder Subscriber

Posted on • Originally published at arindam1729.hashnode.dev

5 2 2 3 2

React Router Not Working on Vercel?

Introduction

Hey there, Fellow devs!👋🏼

Recently, I was working on a project and got a wired issue with Vercel Deployment. So after searching a bit and going through Stackoverflow, I got a solution that I believe could benefit others facing similar challenges

In this article, we'll explore How to fix Vercel React Sub-routes-related problems.

So, Without Delaying Further, Let's START!

What is Vercel?

Vercel.com Website

Before we begin, If you don't know what is Vercel! Vercel is a cloud platform for deploying modern web applications. In short, Vercel allows developers to:

  • Deploy websites and apps instantly

  • Scale automatically

  • Serve personalised content globally

The Problem:

After Deploying my Recent project to Vercel, I got one Weird Error with sub-routes.

Those Routes were working perfectly on my local system But when I tried to go to a sub-route directly on Vercel (like page/about), it showed a 404 error

Error Image

The Solution:

To get the Solution to this weird error, I went to the ever-reliable Stackoverflow! And After searching a bit I got the answer!

In the beginning, I thought It was an error of Vite.js but later understood that the issue wasn't with Vite.js itself. The error I got was due to a missing configuration file of Vercel.

In the context of a single-page application, the HTML files for routes generated by React Router might not exist, especially for sub-routes. Therefore, a server-side mechanism is required to redirect all requests to the root ('/') or the index.html file.

To resolve the sub-route accessibility issue, We have to add rewrites to the vercel.json configuration file.

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
Enter fullscreen mode Exit fullscreen mode

These rewrite rules instruct Vercel to redirect all incoming requests (regardless of the path) to the root file, ensuring that the React Router can handle the routing on the client side.

Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript, React, and other web Development topics.

For Paid collaboration mail me at : arindammajumder2020@gmail.com

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)

Thank You text

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay