React Router and Vite App: 404 Error for Routes on Vercel Deployment

[mrinnnmoy (Mrinmoy)]

I’m deploying a React application built with Vite and using React Router for client-side routing. While the app works perfectly in development, I’m encountering issues when trying to access routes directly after deployment on Vercel. Here’s a summary of the problem:

Problem Description:

• The app’s root URL (https://donatexpress.vercel.app/) works fine and I can navigate between pages using the links.
• However, when I try to access a route directly (e.g., https://donatexpress.vercel.app/Create), I get a 404: NOT_FOUND error.

App Details:

• Built using Vite with React.
• Using React Router for client-side routing with <BrowserRouter>.
• Routes in App.jsx are defined like this:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/Create" element={<CreateCampaign />} />
    <Route path="/Donate" element={<Campaigns />} />
    <Route path="/User" element={<UserCampaigns />} />
    <Route path="/View" element={<ViewCampaign />} />
  </Routes>
</BrowserRouter>

What I Tried:

1. Added a vercel.json file with the following content:

{
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

2. Verified the vite.config.js file and ensured the build output is correct.

3. Previewed the app locally after running npm run build and npm run preview, and it works fine.

Expected Behavior:

Routes like /Create or /Donate should be handled by React Router and render the respective components.

Actual Behavior:

Directly accessing any route other than / results in a 404: NOT_FOUND error.

Could anyone guide me on the correct way to configure Vercel for a Vite app with React Router? Any help would be greatly appreciated!

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[pawlean (Pauline P. Narvas)]

Hi, @mrinnnmoy! Welcome to the Vercel Community

Thank you for providing such a detailed description of your issue. It seems you’re very close to the solution!

The problem lies in the vercel.json configuration you’ve tried. Instead of using routes, Vercel recommends using rewrites for single-page applications like yours. Here’s the correct configuration:

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

Replace the content of your vercel.json file with this configuration. This tells Vercel to serve your index.html for all routes, allowing React Router to handle the routing on the client side .

After making this change, commit and redeploy your application. This should resolve the 404 errors you’re experiencing when accessing routes directly.

If you encounter any issues after this change, please let me know, and I’ll be happy to help you troubleshoot further!