Routing

This document describes the routing system used in the project, including how to add new pages, dynamic routes, and best practices.

---

Router Used

• The project uses React Router (or Next.js router, if applicable) for client-side routing.
• All routes are defined in src/routes/ or in the main app file (e.g., App.tsx).

---

Adding New Routes

1. Create a new page/component in src/pages/ (or the appropriate domain folder).
2. Add a route in the router configuration:
   • For React Router: Add a <Route path="/your-path" element={<YourComponent />} /> in App.tsx or src/routes/.
   • For Next.js: Add a new file in pages/ (e.g., pages/your-path.tsx).
3. Link to the route using <Link to="/your-path"> or router.push('/your-path').

---

Dynamic Routes

• Use :param syntax for dynamic segments (e.g., /orgs/:orgId).
• Access route params using hooks (e.g., useParams in React Router, useRouter in Next.js).

---

Route Protection

• Use auth context or guards to protect private routes.
• Redirect unauthenticated users to login or a public page.
• Example (React Router):

  {
    isAuthenticated ? <PrivatePage /> : <Navigate to="/login" />;
  }

---

Best Practices

• Keep route definitions organized and grouped by domain.
• Use lazy loading for large pages/components.
• Avoid deeply nested routes unless necessary.
• Use centralized route constants for paths if possible.

---

For more, see ARCHITECTURE.md or ask a maintainer.