frontend-navigationlisted

## Architecture React Router v7 **Data Router** — `RouteObject[]` config, not JSX `<Routes>/<Route>`. - `routeConfig: RouteObject[]` in `frontend/src/routes/index.tsx` — single source of truth - `createBrowserRouter(routeConfig)` in `entry-client.tsx` — local const, never exported from routes - `createStaticHandler` / `createStaticRouter` in `entry-server.tsx` for SSR - All imports from `'react-router'` — no `react-router-dom` - Auth guards in **loaders** — layout components are pure `<Outlet />` wrappers ## Route Config `frontend/src/routes/index.tsx` exports `routeConfig: RouteObject[]` — a flat config array, never JSX `<Routes>`. Structure: - Root route (`id: 'root'`) with `<RootLayout />` and `rootLoader` - `<GuestLayout />` group → guest routes (`/`, `/login`, `/verify-email`) - `<ProtectedLayout />` group → protected routes (`/app`, `/settings`) - Public routes at root level (`/examples`) - `{ path: '*', element: <NotFound /> }` catch-all To add a route: add a `RouteObject` to the correct group's `children[]` in `routes/index.tsx`. | Path | Component | Auth | Group | | --------------- | ------------- | ----------------------- | ----------------- | | `/` | `Landing` | No (→ `/app` if authed) | `GuestLayout` | | `/login` | `Login` | No (→ `/app` if authed) | `GuestLayout` | | `/verify-email` | `VerifyEmail` | No (→ `/app` if authed) | `GuestLayout` | | `/examples` | `Example