App Router
Documentation for AppRouter Component
Overview
AppRouter serves as the central routing component in the application. It defines the routes and associates each with a specific component. It also implements authentication and authorization logic, directing users to the appropriate pages based on their roles and authentication status.
Routes
/invoice/:id: Displays a specific invoice. Accessible to authenticated users./client: Client dashboard. Accessible to authenticated users./invoices: Lists all invoices. Accessible to authenticated users./CheckoutPage/:id: Checkout page for a specific invoice. Accessible to authenticated users./profile: User profile page. Accessible to authenticated users./admin-dashboard: Admin dashboard. Accessible to admin users only./all-users: Lists all users. Accessible to admin users only./all-users/:id: Details of a specific user. Accessible to admin users only./all-invoices: Lists all payments/invoices. Accessible to admin users only.*: A catch-all route that displays theNotFoundPagefor any undefined paths.
Components
RequireAuthandRequireAdmin: Wrappers to enforce authentication and authorization.NotFoundPage: Displayed when a user navigates to a non-existent route.
Usage
Import AppRouter and embed it within the main app component to enable routing across the application.
Improvements
- Lazy Loading: Implement React’s lazy loading for components to improve performance.
- Route Documentation: Include comments for each route for clarity and ease of maintenance.
Example
<AppRouter />This component is critical for navigation, ensuring users are directed to the correct pages based on their roles and authentication status. It enhances user experience by providing a structured and secure way to access different parts of the application.