Application Routing
Relevant source files
The following files were used as context for generating this wiki page:
The application routing system serves as the structural backbone of the "Bazar del Venado" web application. It facilitates navigation between different views, manages stateful data delivery through context providers, and enforces security constraints via route guards. The system is built using react-router-dom and is designed to handle both public access and authenticated user sessions.
Routing is centralized within a dedicated module that not only defines URL paths but also manages the global state for product data, ensuring that components across different routes have a consistent view of the application's data.
Sources: Front/src/routes/appRoutes.jsx:1-12, Front/src/App.js:1-15
Routing Architecture
The routing architecture follows a hierarchical structure where the main entry point wraps the application in essential providers before delegating path definitions to a specialized routing component.
Root Configuration
The application is wrapped in a BrowserRouter (aliased as Router in some files) which enables HTML5 history API features. At the highest level, the application provides global contexts for Authentication and Chat management, which are consumed by the routing logic to make authorization decisions.
Sources: Front/src/App.js:10-18, Front/src/App.jsx:21-27
Navigation Component
A global AppNavbar component is rendered outside the Routes definition but inside the BrowserRouter. This ensures the navigation bar remains persistent across all route transitions while maintaining access to navigation hooks like useNavigate.
Sources: Front/src/App.js:13, Front/src/components/navbar.jsx:7-12
The diagram shows the provider nesting and the delegation of path management to the AppRoutes component.
Sources: Front/src/App.js:10-18, Front/src/routes/appRoutes.jsx:35-70
Defined Routes and Access Control
The application classifies routes into two main categories: Public Routes, accessible to any visitor, and Protected Routes, which require an active user session.
Route Map
The following table summarizes the primary routes defined in the system:
| Path | Component | Access Level | Description |
|---|---|---|---|
/ | Home | Public | Main landing page displaying product listings. |
/login | Login | Public | User authentication page. |
/register | Register | Public | New user account creation. |
/product/:id | ProductDetail | Public | Dynamic route for specific product information. |
/publish | PublishProduct | Protected | Interface for creating new listings. |
/my-products | MyProducts | Protected | View for managing user-specific listings. |
/messages | Messages | Protected | Messaging interface between buyers and sellers. |
Sources: Front/src/routes/appRoutes.jsx:36-69, Front/src/components/navbar.jsx:24-55
Route Guarding (ProtectedRoute)
Access to sensitive areas is managed by the ProtectedRoute component. This component acts as a wrapper that checks the user state from AuthContext. If no user is authenticated, it utilizes the <Navigate /> component to redirect the requester to the /login path.
Sources: Front/src/components/ProtectedRoute.jsx:1-13
This sequence diagram illustrates the logic flow when a user attempts to access a secured path.
Sources: Front/src/components/ProtectedRoute.jsx:5-11
Integration with Data Contexts
The routing system is uniquely integrated with the ProductContext. This context is defined within the routing file to provide centralized product management functions to all routed components.
Product Management Logic
The AppRoutes component maintains the products state and provides helper functions via ProductContext.Provider:
handleAddProduct: Generates a unique ID and attaches seller info (retrieved fromAuthContext) before adding to state.getProductById: Filters the global list based on the:idURL parameter.getUserProducts: Filters listings belonging to a specificuserId.
Sources: Front/src/routes/appRoutes.jsx:18-33
Dynamic Routing
The route /product/:id demonstrates dynamic segment handling. Components like ProductDetail use the useParams hook to extract the ID and interact with the useProducts hook provided by the routing layer to fetch relevant data.
Sources: Front/src/pages/productDetail.jsx:10-15, Front/src/routes/appRoutes.jsx:53
Summary
The Application Routing system in this project effectively decouples navigation logic from UI presentation. By leveraging react-router-dom in conjunction with React Context API, it provides a secure environment where data flows from the routing configuration down to specific page components, ensuring that state like product listings and user authentication remains synchronized across the entire application lifecycle.