Easy guide to solving 404 after deploying react code on vercel/netlify.

So, you've just deployed your shiny new React app on vercel, excited to share it with the world. But wait, what's this? You navigate to a different page, hit refresh, and bam! You're greeted with a dreaded 404 Not Found Error 🤦‍♀️. Don't panic; you're not alone.

Upon deploying my pokemon application on Vercel at https://pokemon-alpha-bay.vercel.app, I encountered an unexpected issue. Whenever I navigate to a different page and refresh that specific route, ooosssh!!!! a 404 Not Found Error occurs, indicating the route cannot be found.

However, when performing the same action on my local host, the desired result is achieved. Thus, I suspect the error stems from a deployment glitch on Vercel.

Assuming you are facing the same problem, This guide is here to help you troubleshoot and fix those pesky 404 errors on vercel.

Step 1: Double-Check Your Routes
The first step in troubleshooting 404 errors on Vercel is to ensure that your routes are correctly defined. Sometimes, a simple typo or oversight can lead to routes not being recognized by the server. Double-check your route configurations in your React app and ensure they match the paths you're trying to access.

Step 2: Check Your Router Configuration
If you're using a client-side router like React Router, make sure it's set up correctly. Vercel's server needs to be configured to serve your app's index.html file for all routes, so ensure your router is set up to handle this properly. Verify that your BrowserRouter or HashRouter is wrapping your entire application and that your routes are nested correctly within it.

Step 3: Set Up Rewrites and Redirects
Vercel allows you to configure rewrites and redirects in your vercel.json file to handle routing for client-side applications. If you're using client-side routing, you'll need to set up rewrites to ensure that all requests are directed to your index.html file. Here's an example of how to set up rewrites for a React app in your vercel.json:

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

This configuration tells Vercel to serve the index.html file for all routes.

Step 4: Test Locally Before Deploying
Before deploying to Vercel, it's always a good idea to test your app locally to catch any potential issues early on. Make sure to test navigation and page refreshes to ensure everything works as expected before deploying.

Step 5: Deploy and Monitor
Once you've verified that everything is working locally, deploy your app to Vercel and monitor for any 404 errors. If you encounter any, revisit the previous steps to troubleshoot and make adjustments as necessary.

The result

Conclusion:
Ah, the wild journey of web development! It's full of twists and turns, but don't let those sneaky 404 errors on Vercel get you down. With the tips we've covered in this guide and a sprinkle of attention to your route configurations and server setup, you'll be breezing past those hurdles in no time. So, keep that smile on your face, keep tinkering with your React app, and before you know it, you'll be proudly sharing it with the world. Happy coding, friend!