Routing Structure

Route Organization

AcqMarketplace uses React Router v6 with a centralized route definition in src/components/routing/AppRoutes.tsx. All routes are wrapped with the AppLayout component for consistent navigation and footer.

Route Map

Based on src/components/routing/AppRoutes.tsx, here are all available routes:

Public Routes

Route	Component	Description	Layout
/	Index	Homepage with featured listings	AppLayout
/explore	Explore	Browse all listings with filters	AppLayout
/listing/:id	ListingDetail	Individual listing details	AppLayout
/auth	Auth	Login/register page	AppLayout
/auth/confirm	AuthConfirm	Email confirmation	None
/auth/update-password	UpdatePassword	Password reset form	AppLayout
/reset-password	ResetPassword	Password reset request	AppLayout
/how-it-works	HowItWorks	Platform explanation	AppLayout
/how-to-buy-sell	HowToBuySell	User guides	AppLayout
/faq	FAQ	Frequently asked questions	AppLayout
/blog	Blog	Blog post listing	AppLayout
/blog/:slug	BlogPost	Individual blog post	AppLayout
/profile/:id	PublicProfile	Public user profile	AppLayout
/page/:slug	SimplePage	CMS-managed pages	AppLayout

Protected Routes (Authenticated Users)

Route	Component	Guard	Description
/buyer-dashboard	BuyerDashboard	ProtectedRoute	Buyer's main dashboard
/seller-dashboard	SellerDashboard	ProtectedRoute	Seller's main dashboard
/seller-verification	SellerVerification	ProtectedRoute	Seller verification form
/profile-verification	ProfileVerification	ProtectedRoute	Profile verification form
/create-listing	CreateListing	ProtectedRoute	Create new business listing
/messages/*	Messages	ProtectedRoute	Messaging system
/notifications	Notifications	ProtectedRoute	User notifications
/notification/:id	NotificationDetail	ProtectedRoute	Individual notification
/my-offers	MyOffers	ProtectedRoute	User's offers (buy/sell)
/my-listings	MyListings	ProtectedRoute	Seller's listings
/transactions	TransactionHistory	ProtectedRoute	Transaction history
/watchlist	Watchlist	ProtectedRoute	Saved listings
/account-settings	AccountSettings	ProtectedRoute	User settings
/contact-admin	ContactAdmin	ProtectedRoute	Contact admin form
/invoice-history	InvoiceHistory	ProtectedRoute	Billing history
/price-alerts	PriceAlerts	ProtectedRoute	Price alert management
/activities	Activities	ProtectedRoute	User activity log
/dashboard/pricing	DashboardPricing	ProtectedRoute	Subscription management
/deal-new/:id	DealNew	ProtectedRoute	New deal creation
/deal/:id	DealPage	ProtectedRoute	Deal management
/listing/:id/comments	ListingWithCommentsPage	ProtectedRoute	Listing admin comments

Admin Routes (Admin Users Only)

Route	Component	Guard	Description
/admin	AdminDashboard	AdminProtectedRoute	Admin main dashboard
/admin/users	AdminUsers	AdminProtectedRoute	User management
/admin/listings	AdminListings	AdminProtectedRoute	Listing moderation
/admin/listings/:id	AdminListingEdit	AdminProtectedRoute	Edit individual listing
/admin/listings/:id/details	AdminListingsDetail	AdminProtectedRoute	Listing details view
/admin/offers	AdminOffers	AdminProtectedRoute	Offer management
/admin/reports	AdminReports	AdminProtectedRoute	User reports
/admin/transactions	AdminTransactions	AdminProtectedRoute	Transaction oversight
/admin/deal/:id	DealPage	AdminProtectedRoute	Deal administration
/admin/analytics	AdminAnalytics	AdminProtectedRoute	Platform analytics
/admin/blog	AdminBlog	AdminProtectedRoute	Blog management
/admin/blog/:id	AdminBlogDetail	AdminProtectedRoute	Edit blog post
/admin/pages	AdminPages	AdminProtectedRoute	CMS page management
/admin/profile-verifications	AdminSellerVerifications	AdminProtectedRoute	Verification requests
/admin/subscription-plans	AdminSubscriptionPlans	AdminProtectedRoute	Subscription management
/admin/storage	AdminStorage	AdminProtectedRoute	File storage management
/admin/sitemap	AdminSitemap	AdminProtectedRoute	SEO sitemap tools
/admin/settings	AdminSettings	AdminProtectedRoute	Platform settings
/admin/logs	AdminLogs	AdminProtectedRoute	System logs
/admin/message-history	AdminMessageHistory	AdminProtectedRoute	Message moderation
/admin/price-alerts	AdminPriceAlerts	AdminProtectedRoute	Price alert admin
/admin/templates	AdminTemplates	AdminProtectedRoute	Email templates

Special Routes

Route	Component	Description
*	NotFound	404 error page (with AppLayout)

Route Guards

ProtectedRoute Component

File: src/components/ProtectedRoute.tsx

• Checks user authentication status
• Redirects to /auth if not authenticated
• Allows access to protected user features

AdminProtectedRoute Component

File: src/components/AdminProtectedRoute.tsx

• Checks both authentication and admin role
• Redirects non-admin users to appropriate dashboard
• Protects administrative functionality

Layout Components

AppLayout Component

File: src/components/layout/AppLayout.tsx

Provides consistent structure for all routes:

• Header with navigation
• Main content area
• Footer
• Sidebar (context-dependent)

Layout Behavior

• Public Routes: Standard header/footer
• Protected Routes: Authenticated user navigation
• Admin Routes: Admin-specific sidebar and navigation
• Auth Routes: Minimal layout for focus

Route Configuration

Router Setup

File: src/App.tsx:21-30

const router = createBrowserRouter([
  {
    path: "*",
    element: <AppRoutes />,
  },
], {
  future: {
    v7_relativeSplatPath: true,
  },
});

Route Navigation Patterns

Programmatic Navigation

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

// Redirect after successful action
navigate('/dashboard');

// Replace current entry in history
navigate('/login', { replace: true });

// Navigate with state
navigate('/deal/123', { state: { fromOffer: true } });

Link Navigation

import { Link, NavLink } from 'react-router-dom';

// Standard link
<Link to="/explore">Browse Listings</Link>

// Navigation link with active state
<NavLink to="/my-listings" className={({ isActive }) => 
  isActive ? 'active-nav' : 'nav-link'
}>
  My Listings
</NavLink>

Route Parameters

Dynamic Route Parameters

Pattern	Example	Component Access
/:id	/listing/123	const { id } = useParams()
/blog/:slug	/blog/how-to-sell	const { slug } = useParams()
/deal/:id	/deal/456	const { id } = useParams()

Query Parameters

import { useSearchParams } from 'react-router-dom';

const [searchParams] = useSearchParams();
const category = searchParams.get('category');
const page = searchParams.get('page') || '1';

Route Protection Logic

Authentication Check

// ProtectedRoute implementation
const { user, loading } = useAuth();

if (loading) return <LoadingSpinner />;
if (!user) return <Navigate to="/auth" replace />;

return children;

Role-Based Access

// AdminProtectedRoute implementation
const { user, loading } = useAuth();
const { userRole } = useUserRole();

if (loading) return <LoadingSpinner />;
if (!user) return <Navigate to="/auth" replace />;
if (userRole !== 'admin') return <Navigate to="/dashboard" replace />;

return children;

SEO and Route Metadata

Dynamic Page Titles

Each route component should implement SEO metadata:

import { Helmet } from 'react-helmet-async';

function ListingDetail() {
  return (
    <>
      <Helmet>
        <title>Business Listing - AcqMarketplace</title>
        <meta name="description" content="..." />
      </Helmet>
      {/* Component content */}
    </>
  );
}

Route Performance

Code Splitting

Routes are automatically code-split by Vite, but you can implement manual splitting:

import { lazy, Suspense } from 'react';

const AdminDashboard = lazy(() => import('@/pages/admin/AdminDashboard'));

// In route definition
<Suspense fallback={<LoadingSpinner />}>
  <AdminDashboard />
</Suspense>

Route Preloading

Critical routes can be preloaded:

import { router } from './App';

// Preload route on hover
<Link 
  to="/listing/123" 
  onMouseEnter={() => router.preloadRoute('/listing/123')}
>
  View Listing
</Link>

---

Related Documentation:

• Architecture Overview - Overall system structure
• State Management - Route-based state patterns
• Features Guide - Feature-specific routing