Route Structure and Adding New Public and Private Routes

This document explains the structure of your React application's routes and guides you on adding new public and private routes.

Overall Structure:

• AppRoutes component manages all routing within the application.
• Protected Routes:
  • Wrapped with AuthenticateGuard, requiring user authentication.
  • Nested within the Dashboard layout.
  • Examples: Home, MyAccount, Blogs, etc.
• Unprotected Routes:
  • Wrapped with UnAuthenticateGuard, allowing access to unauthenticated users.
  • Nested within the Auth layout.
  • Examples: Login, Register, ForgotPassword, etc.
• Shared Route:
  • NotFoundPage accessible regardless of authentication status.

Adding New Routes:

Public Route:

1. Create the page component: In the pages folder, create a React component for your new public page (e.g., NewPublicPage.jsx).
2. Define the route: In AppRoutes, add a new route outside the guards, referencing your new page component and path (e.g., <Route path="/new-public-page" element={<NewPublicPage />} />).
3. Optional Layout: If desired, consider creating a new layout component (e.g., PublicLayout.jsx) and nest your new route within it for consistent styling.

Private Route:

1. Follow steps 1 and 2 for Public Route.
2. Wrap the route with AuthenticateGuard: Update the route within AuthenticateGuard to protect your new page (e.g., <Route path="/new-private-page" element={<NewPrivatePage />} />).
3. Update layout: Assign the Dashboard layout to the new route within AuthenticateGuard (e.g., <Route element={<Dashboard />}>...).

Tips:

• Use descriptive route names and paths for clarity.
• Consider nesting related routes under dedicated layouts for organization.
• Leverage appRoutes constants for centralized route definitions.
• Remember to import necessary components and layouts in AppRoutes.

Example:

To add a new public page called "About Us" and a private page called "Profile":

1. Create AboutUs.jsx in pages and Profile.jsx in pages.

2. Add routes in AppRoutes:

   <Route path="/about-us" element={<AboutUs />} />
   <Route element={<AuthenticateGuard />}>
     <Route element={<Dashboard />}>
       <Route path="/profile" element={<Profile />} />
     </Route>
   </Route>

By following these steps and considering the tips, you can easily add new public and private routes to your React application while maintaining a well-structured and manageable route configuration.