Development Hurdle Faced

Challenge: Persistent State Reset on Page Refresh with React Router and Vite

While developing the Community Feed and Event Management pages, we noticed an issue where navigating between routes worked perfectly, but on directly refreshing a page like

/events

, the app threw a 404 Not Found error. This happened because the browser was trying to directly access the route via the server, but since we’re using Vite with client-side routing (React Router) and no backend server to handle these routes, it caused a problem.

---

Resolution

After some debugging, we discovered this is a common issue with client-side routing setups. The fix involved:

1. Adding a fallback HTML file rule in the

   vite.config.ts

   to redirect all unknown routes to

   index.html

   .
2. Configuring the hosting (in future deployment) to always serve

   index.html

   for any unknown path, so React Router can handle it.

Updated vite.config.ts:

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: '/index.html',
    },
  },
  server: {
    historyApiFallback: true, // Added this line
  },
});