Vercel + Reactjs & Vite Returning 404 on page refresh

Question

So i have a code base that i built using React, TailwindCSS, and Vite using react router as the routing.

For some reason when built going to the home page and the rest of the pages work perfect, but once i refresh, i am given a 404 error.

i have checked my vercel.json file. i have tried other solutions that have been posted on here and im not sure where im going wrong. I have tried adding this file in the root of my folder (where it currently is) and also inside my src folder as i seen some examples with that as well.

I have tried changing

routes: [
{ 
 "src" :  //here
 }
 ]

per examples i have seen but to luck!

let me know what i need to do or if youd like to see any other files, but the src code is available here

https://github.com/InsurTech-Groups/home-form-english

Thanks!

Additional information

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node",
      "config": {
        "maxLambdaSize": "75mb"
      }
    },
    {
      "src": "index.html",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist",
        "command": "npm run build",
        "env": {
          "NODE_ENV": "production"
        },
        "output": {
          "clean": true
        },
        "postbuild": {
          "command": "npm run postbuild",
          "env": {
            "BUILD_DIR": "$VERCEL_BUILD_OUTPUT_DIR"
          }
        },
        "files": [
          "dist/**/*",
          "public/**/*",
          "src/**/*.{js,jsx,ts,tsx}",
          "!**/node_modules/**"
        ]
      }
    }
  ],
  "routes": [
    {
      "src": [{ "src": "/[^.]+", "dest": "/", "status": 200 }],
      "dest": "/index.html"
    }
  ]
}

Links GithubURL: https://github.com/InsurTech-Groups/home-form-english Live Vercel Site: https://home-form-english.vercel.app

Answer 1

Seems like the issue fixed when i deleted everything in the vercel.json and just had this

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

Answer 2

This issue occurs because Vercel serves static files, and when you refresh a page on a sub-route (e.g., /dashboard or /profile), it looks for a corresponding file on the server, which doesn’t exist. React Router handles routing on the client side, but Vercel doesn’t know how to redirect those routes correctly without additional configuration.

Solution: Configure vercel.json

To ensure all routes are served correctly, add a vercel.json file in the root directory with the following content:

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

This rewrite rule tells Vercel to always serve index.html, allowing React Router to handle routing as expected.

Steps to Fix:

1. Create (or update) the vercel.json file in your project’s root directory.
2. Add the above rewrite rule.
3. Redeploy your project on Vercel.
4. Test refreshing a sub-route—it should now load correctly without a 404 error.

Additional Fix for Vite Projects

If you’re using Vite, update vite.config.js to ensure proper handling of history API fallback:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/",
  build: {
    outDir: "dist"
  },
  server: {
    historyApiFallback: true
  }
});

This configuration ensures that Vite properly handles routing in development while Vercel takes care of it in production.

After applying these fixes, your app should no longer return a 404 error on page refresh.