Basically I was trying to use react router in my vite project. But the problem is when I found that React router is not properly working in Varcel when I refresh webpages. It shows me 404: NOT FOUND error

I have read many solutons over internet & stackoverlow but none of them work for my project. I don’t understand why these solutions is not working for me?

My app.jsx routes –

<BrowserRouter>
        <div className='App'>
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route path="/bookSeat" element={<BookTicket />}/>
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </div>
</BrowserRouter>

varcel.json –

{
  "routes": [
    { "src": "/bookSeat", "dest": "/" },
    { "src": "/contact", "dest": "/" },
    { "src": "/", "dest": "/" }
  ]
}

I have also tried with this code inside varcel.json –

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

but none of them worked & I am still getting this 404 error.

But here is the more interesting part. I used this react router for my another portfolio project & there it worked without using any varcel.json. There I can refresh webpages multiple time & navigate pages multiple times without having any error. The only difference is I used npm create-react-app for my portfolio project & here I am using vite to build my project.

So what should be the correct way to fix this issue?

I tried with various code from stackoverflow inside varcel.json & those are not working and I am expecting to have a solution that will work universally.