React + Vite + createBrowserRouter: Production 404 on Nested Routes

In my React + Vite project using createBrowserRouter, everything works as expected in local dev and Vercel preview deployments. But in production, routes like /reset-password and nested paths like /users/:id throw a 404 error when accessed directly or refreshed.

Current (Production only):

Visiting /reset-password or any nested route directly causes a Vercel 404 error.
Supabase password reset link (which redirects to /reset-password) fails in production.

Expected:

These routes should be handled by the SPA (index.html) and routed correctly by React Router.

vite.config.ts

export default defineConfig(({ mode }) => ({
  base: '/',
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

vercel.json

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

Steps to reproduce:

Deploy to Vercel
Visit https://your-production-domain/reset-password → ❌ 404
Visit https://your-production-domain/sub-route/:param → ❌ 404
These same URLs work in dev and preview

Project Info

Framework: React (TypeScript) + Vite
Router: React Router DOM (createBrowserRouter)
Hosting: Vercel (Preview works fine, Production has issue)
Auth: Supabase (sends email reset-password links to frontend)
Deployment: Auto from GitHub

There's another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

Vercel Staff

If you set the framework in your build settings to Vite and remove the rewrites in the vercel.json this should work out of the box

Here's a deployed example of createBrowserRouter running on Vercel

https://github.com/jacobparis/vite-react-router-data?tab=readme-ov-file

GitHub

GitHub - jacobparis/vite-react-router-data

Contribute to jacobparis/vite-react-router-data development by creating an account on GitHub.

Let me know if that works for you, otherwise if you share your repo or a minimal reproduction I can debug further

Hello Jacob. I am having the same issue with getting 404 when I refresh my nested routes. I went to your live site in your github readme. I am seeing 404 error when refreshing a nested route on your live site. https://vite-react-drab-two-60.vercel.app/

vite-react-drab-two-60.vercel.app

Vite + React + TS

reply to #3

Leaderboard GOAT

Your example site is not working. For example, visit a URL directly instead of from the main page:

https://vite-react-drab-two-60.vercel.app/about

vite-react-drab-two-60.vercel.app

Vite + React + TS

(This is because Vite creates an SPA.)

Leaderboard GOAT

I find it very interesting that it works in preview but not production. Do you have the source code (or a minimal source code with the same error) public anywhere so I can test it?

reply to #5

i added the vercel.json file to the root but it is not fixing the 404 error. Here is my project if you would like to check it out. https://github.com/JacobBaqleh1/ROAM

GitHub

GitHub - JacobBaqleh1/ROAM

Contribute to JacobBaqleh1/ROAM development by creating an account on GitHub.

Leaderboard GOAT

I found the problem. There is a typo in your vercel.json.

You file should look like this:

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

Diff:

{
  "rewrites": [
    {
-     "src": "/(.*)",
+     "source": "/(.*)",
      "destination": "/index.html",
-     "status": 200
    }
  ]
}

Working demo:

(This link will no longer be available in a few days): https://vcvm-roam-client.vercel.app/

Please note: The community page doesn't work on my demo because it requires auth environment variables that only you have.

thanks. I made the edit but I am still getting the 404 error on refresh.

Vercel Staff

Hey have your read through our docs for Vite SPAs?

Are you just refresing on the homepage or a particular route/flow?

reply to #9

Leaderboard GOAT

Edit: This response is not applicable to you, ignore it!

Response Odd that you are still having issues, since my demo deployment is working fine. Have you modified any of the project settings on the Vercel deployment? Mine look like this:

(All the settings are just the default ones.)

Sorry!

Vercel Staff

I actually think it's an issue with your setup. Your vercel.json should be in your project root. If you are deploying Develop the folder as the project and using the client subdir for the build output, that isn't going to find your vercel.json.

Can you move it to the root dir?

Leaderboard GOAT

Ah, good point! You just made me realize something!

Old solution

This solution is outdated because the project config for your project is different than I assumed.

and , this is how you should deploy the client to Vercel:

In project settings on vercel.com, use the Vite framework preset and set the root directory to Develop/client:
In Develop/client, (not the GitHub project root), put the vercel.json file. You have already done this:

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

Do not put the vercel.json in the GitHub project root. If you do, you will see a warning: “Provided root directory” means the project root you set in settings on vercel.com, which you should set to Develop/client.

Based on your current project config, you should move vercel.json from Develop/client to Develop/. Do not move it to the GitHub project root, just to Develop/, which is the deployment root.

Try setting "cleanUrls" to "false" in vercel.json

Solution in topic here: https://community.vercel.com/t/rewrite-to-index-html-ignored-for-react-vite-spa-404-on-routes/8412

Vercel Community

Rewrite to index.html ignored for React + Vite SPA (404 on routes)

Hi all, I'm deploying a React + Vite SPA to Vercel (not using Next.js), and I’m seeing Vercel’s default 404 page on client-side routes like /profile, even...

reply to #12

Thanks. Moving the vercel.json file to the root dir worked! Appreciate the help.

Leaderboard GOAT

Awesome!

Would you like me to unpublish my copy of your website that I created for demo purposes? https://vcvm-roam-client.vercel.app/

Edit: I have unpublished my clone of the site.

i dont mind what you do with it

The problem had to do with DNS and redirect settings.

Vercel Alum

1_FHMRtwmo71YhrJihYwIEZQ

This topic is closed. It no longer accepts new replies.

export default defineConfig(({ mode }) => ({ base: '/', server: { host: "::", port: 8080, }, plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }));

Ah, good point! You just made me realize something!

Old solution

This solution is outdated because the project config for your project is different than I assumed.

and , this is how you should deploy the client to Vercel:

In project settings on vercel.com, use the Vite framework preset and set the root directory to Develop/client:
In Develop/client, (not the GitHub project root), put the vercel.json file. You have already done this:

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

Do not put the vercel.json in the GitHub project root. If you do, you will see a warning: “Provided root directory” means the project root you set in settings on vercel.com, which you should set to Develop/client.