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:

1
<BrowserRouter>
2
  <Routes>
3
    <Route path="/" element={<Home />} />
4
    <Route path="/Create" element={<CreateCampaign />} />
5
    <Route path="/Donate" element={<Campaigns />} />
6
    <Route path="/User" element={<UserCampaigns />} />
7
    <Route path="/View" element={<ViewCampaign />} />
8
  </Routes>
9
</BrowserRouter>

What I Tried:

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

1
{
2
  "routes": [
3
    {
4
      "src": "/(.*)",
5
      "dest": "/index.html"
6
    }
7
  ]
8
}

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!