I am having a little issue with routing, my routing is working as intended however there is a slight quirk I can't figure out.

I have two routes:

• domain.com
• domain.com/logs

On domain.com I have the following header.

<nav className="space-x-4">
          <Link to="/">
            <LinkButton btnText="Home" />
          </Link>
          <Link to="/logs">
            <LinkButton btnText="Logs" />
          </Link>
</nav>

Clicking through on these links works fine as expected. However when I am on domain.com/logs and refresh the page i get a 404. Below is how I have set up my routing.

import Logs from './routes/Logs'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/logs" element={<Logs />} />
    </Routes>
  </BrowserRouter>
)

I have come across this link: https://vercel.com/docs/concepts/edge-network/frequently-asked-questions#why-do-i-see-a-404-error-when-accessing-my-deployment

I am building from the whole dir so should include the routes folder.

Now I am not sure if this is something to do with Vercel or Vite. Any suggestions would be great. Also to note this...works perfectly locally so must be a build thing.