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

[ig-imanish]

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://manixh.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://manixh.vercel.app/projects), I get a 404: NOT_FOUND error.

App Details:

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/projects" element={<Projects/>} />
    <Route path="/blogs" element={<Blogs/>} />
  </Routes>
</BrowserRouter>

What I Tried:

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

{
  "rewrites": [{ "source": "/(.*)", "destination": "/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 /projects or /blogs 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)]

Hey, @ig-imanish!

Thanks for your patience.

Could you perhaps try using this more explicit configuration?

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

Or alternatively, stick with rewrites but be more specific:

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

Let us know how you get on!

[stoplightdev]

Hi Pauline, I’m experiencing the same issue, and these options don’t work for me.

[pawlean (Pauline P. Narvas)]

Hey and welcome to the community, Stoplightdev!

Happy to help - can you share any more information with us?

I also recommend checking out: Debugging 404 Errors