Search code examples
reactjsvercel

React Redirect Works Locally but 404s on Vercel

I'm experiencing an issue with my React application deployed on Vercel. I have a route /property/:id that includes a button which, when clicked, should redirect to /profile/:id. This redirection works perfectly on my local development environment but fails when deployed to Vercel, showing a 404 response in the console(id is utilized by firebase further in profile/:id).

Strangely, the redirection works fine when I am on the root / directory and navigate to /profile/:id directly. It only seems to fail when trying to redirect from /property/:id to /profile/:id

error:

in console it shows response 404

Solution

  • Ensure your Vercel deployment is configured to redirect all non-static and non-API requests to the index.html file. This can usually be done by configuring a vercel.json file in your project root with rewrite rules:

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

    Review your React Router configuration for dynamic routes and ensure it matches your intended URL structures. Also, review any server-side configurations (like vercel.json) to ensure they allow for dynamic routing.