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
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.