Here is my poor answer. I hope to help you by this.

This is a common scenario in Single Page Applications (SPAs) that use client-side routing (e.g., React Router):

• When navigating via links inside the SPA, React Router handles URL changes in the browser and loads the correct components without a full page reload.
• When refreshing or directly accessing a URL, the browser sends a request to the server for that specific path.
• If the server isn’t configured to handle client-side routes, it looks for a matching file or route on the server and returns 404 if none is found.

Since Vite’s default dev server handles SPA fallback correctly, the issue only appears after you deploy your app to your own server or a production environment.

You need to configure your server to fallback all unknown routes to your index.html so React Router can handle routing.

For example, if you use Nginx (common in production): You can add a configuration like this:

location / {
    try_files $uri /index.html;
}

If you use Docker, please let me know, I will help you.