Skip to main content

Concern

Client-side routing and navigation.

Technology

React Router

Documentation​

Mode

Use Data Mode, not Framework Mode or Declarative Mode. Data Mode gives route-based data loading, actions, and pending UI while keeping control over bundling and the app structure.

  • Top-level API: createBrowserRouter and RouterProvider (route configuration lives outside React rendering).
  • Features: loader, action, useLoaderData, useActionData, useFetcher, useNavigation, and related APIs.
  • Do not use the React Router Vite plugin or file-based route modules (Framework Mode). When to use Data Mode vs Declarative Mode is covered in patterns.

Implementation

The desktop app uses React Router in Data Mode: the router is created with createBrowserRouter and the app is rendered with RouterProvider, so route configuration lives outside the React tree and you get route-based data loading and actions. frontends/desktop/src/main.tsx wires the router and wraps the app in QueryClientProvider (TanStack Query) and AuthProvider (frontend-only auth state; see capability auth). The root route has Component: App (layout with Outlet and Toaster). Child routes: a layout route with Component: AuthGuard (redirects to /auth/sign-in when not authenticated) and child index route '/' → dashboard (shadcn sidebar-07 layout); path 'auth/sign-in' → sign-in page (login form, unprotected). The dashboard is exposed at / and protected by the guard; the sign-in page is at /auth/sign-in. No React Router Vite plugin or file-based route modules are used. Loaders and actions can use handleRequest from frontends-shared/lib/api for API calls.

Integration

server-state / TanStack Query​

Loaders can fetch data; use http-client (Axios) or TanStack Query where appropriate. Mutations and invalidation integrate with form-handling.

http-client / Axios​

API calls from loaders/actions typically use the same Axios instance as the rest of the app (base URL, interceptors).

Version

v7