Getting 404 on a routed page with Vite and React Router v6

Question

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.

Answer 1

The index.html that serves up your website when you visit domain.com also needs to be served up when you visit domain.com/logs your client side routing will then work.

The react-router will then show your app in its correct state.

More info can be found here describing deployments with client side routing https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

im not familiar with vercel but they will probably have a wildcard option to serve the index document up for any unresolved routes.