Fixing React App Dynamic Route Issues on Vercel

Deploying a React app on Vercel is straightforward, but dynamic routes often break when reloading the page or accessing them directly. Here's how to fix it.

Why Does This Happen?

React apps are single-page applications (SPAs). When you reload a dynamic route (e.g., /users/123), the server looks for a corresponding file. Since it doesn't exist, the server returns a 404 error.

---

The Solution

Configure Vercel to redirect all requests to index.html, allowing React Router to handle routing on the client side.

---

Steps to Fix

1. Create a vercel.json File
   Add this file to the root of your project if it doesn’t exist.

2. Add Rewrite Rules
   Add the following configuration to vercel.json:

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

3. Deploy Your App
   Push your changes to Git, and Vercel will automatically apply the new configuration.

---

Testing Locally

1. Install serve:

    npm install -g serve
   

2. Build your app:

    npm run build
   

3. Serve the build folder:

    serve -s build
   

4. Test dynamic routes by reloading or accessing them directly.

---

Why This Works

Redirecting all requests to index.html lets React Router handle routing on the client side, ensuring dynamic routes work correctly.

---

Final Notes

• Use BrowserRouter for cleaner URLs.

• If using HashRouter, this issue won’t occur, but it’s less ideal for SEO.

• Next.js users don’t need this fix as it handles server-side routing natively.

By following these steps, your React app will work seamlessly on Vercel, even with dynamic routes. 🚀