ajinkya-mhetre-mern/frontend/src/App.jsx

A MERN starter with frontend and backend folders

// Alternative App.jsx - Cleaner Structure
import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import AuthGuard from './components/common/AuthGuard'
import RoleGuard from './components/common/RoleGuard'
import Layout from './components/layout/Layout'
import Login from './pages/auth/Login'
import Register from './pages/auth/Register'
import Home from './pages/Home'
import NotFound from './pages/NotFound'
// Role-based page imports
import AdminFramers from './pages/Admin/Framers'
import AdminUser from './pages/Admin/Users'
import AddminAddFramers from './pages/Admin/AddFramers'
// Farmer-specific page imports
import FramersMyProduct from './pages/Framers/FramersMyProduct'
import FramersMyOrders from './pages/Framers/FramersMyOrders'
// Customer-specific page imports
import UserOrder from './pages/customer/UserOrder'

function App() {
  return (
    <Routes>
      {/* Auth Routes - No Layout */}
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
     
      {/* All other routes use unified Layout */}
      <Route path="/" element={<Layout />}>
        {/* Public Home Route */}
        <Route path="home" element={<Home />} />
        <Route index element={<Navigate to="/home" replace />} />
       
        {/* Protected Dashboard Routes */}
        <Route path="dashboard" element={<AuthGuard />}>
          {/* Admin Routes */}
          <Route path="admin/users" element={<RoleGuard allowedRoles={['admin']}><AdminUser /></RoleGuard>} />
          <Route path="admin/farmers" element={<RoleGuard allowedRoles={['admin']}><AdminFramers /></RoleGuard>} />
          <Route path="admin/addframer" element={<RoleGuard allowedRoles={['admin']}><AddminAddFramers /></RoleGuard>} />
          
          {/* Farmer Routes */}
          <Route path="farmer/my-products" element={<RoleGuard allowedRoles={['farmer']}><FramersMyProduct /></RoleGuard>} />
          <Route path="farmer/my-orders" element={<RoleGuard allowedRoles={['farmer']}><FramersMyOrders /></RoleGuard>} />
          
          {/* Customer Routes */}
          <Route path="customer/order" element={<RoleGuard allowedRoles={['customer']}><UserOrder /></RoleGuard>} />
        </Route>
       
        {/* Catch all other routes - 404 Page */}
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  )
}

export default App