Routing & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
Routing and Navigation in the Boda Cris project are handled through a combination of client-side routing for top-level page transitions and internal state management for administrative sub-views. The system utilizes react-router-dom to differentiate between the public-facing wedding invitation and the protected administrative dashboard.
Sources: src/App.jsx:1-12, src/main.jsx:1-21
Global Application Routing
The application entry point initializes the routing environment using BrowserRouter. The main routing logic is centralized in App.jsx, which defines two primary entry points for the application.
The diagram shows the high-level routing flow from the browser entry point to specific page components.
Sources: src/App.jsx:5-10, src/main.jsx:11-19, src/pages/AdminPage.jsx:12-14
Route Definitions
The project maps specific URL paths to distinct React components.
| Path | Component | Description |
|---|---|---|
/ | InvitationPage | The main landing page for wedding guests. |
/admin | AdminPage | The management interface for event organizers. |
Sources: src/App.jsx:7-8
Administrative Navigation
Within the /admin route, navigation is managed via local state rather than URL changes. This creates a Single Page Application (SPA) experience within the admin panel.
Sub-View Management
The AdminPage uses an activeView state to swap between different functional modules. This state is updated through a top-level navigation bar.
The sequence diagram illustrates how local state management facilitates navigation between admin modules without full page reloads.
Sources: src/pages/AdminPage.jsx:11-90
Admin Navigation Items
The administration panel includes several key modules accessible via the navigation bar:
| Item ID | Label | Icon | Component Rendered |
|---|---|---|---|
dashboard | Dashboard | LayoutDashboard | Dashboard & GuestList (Preview) |
guests | Invitados | Users | Dashboard & GuestList |
content | Contenido | Edit3 | ContentEditor |
Sources: src/pages/AdminPage.jsx:16-20, src/pages/AdminPage.jsx:73-112
Page-Internal Navigation
The project implements smooth scrolling for navigating within the long-form InvitationPage. This is achieved through standard DOM methods and CSS configurations.
- Anchor Scrolling: The
Herocomponent includes a "Scroll indicator" button that usesscrollIntoViewwith asmoothbehavior to transition to the#countdownsection. - CSS Behavior: The global stylesheet enforces
scroll-behavior: smoothfor the entire document.
Sources: src/components/invitation/Hero.jsx:16-21, src/index.css:32-34
Deployment & Fallback Routing
Since the application is a Single Page Application (SPA), the deployment configuration ensures that all server-side requests are redirected to the main entry point to allow client-side routing to take over.
Netlify Configuration
The netlify.toml file contains a specific redirect rule to handle deep links and direct URL access to the /admin path.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Sources: netlify.toml:14-17
Summary
The project employs a tiered navigation strategy: react-router-dom for distinct application zones (Public vs. Admin), React state management for modular tools within the admin panel, and smooth anchor-based scrolling for content discovery within the invitation view. This approach separates the technical concerns of authentication and guest management from the aesthetic-focused guest experience.
Sources: src/App.jsx, src/pages/AdminPage.jsx, src/components/invitation/Hero.jsx