Routing

Grafana's frontend uses React Router with route definitions split across the core router and per-feature contributions.

Top-level

The root tree is in public/app/routes/routes.tsx. It composes:

• Static routes (e.g. /, /dashboards, /login).
• Feature-contributed routes via getDashboardRoutes(), getAlertingRoutes(), etc., each living in public/app/features/<feature>/routes.ts(x).
• Plugin app routes registered at runtime when an app plugin starts.

Each feature owns its routes and uses React.lazy to code-split:

// public/app/features/dashboard/routes.ts (illustrative)
export const getDashboardRoutes = (): RouteDescriptor[] => [
  {
    path: '/d/:uid/:slug?',
    component: SafeDynamicImport(
      () =>
        import(
          /* webpackChunkName: "DashboardPage" */ './containers/DashboardPage'
        )
    ),
  },
  // ...
];

SafeDynamicImport is a wrapper in public/app/core/components/DynamicImports/ that wraps the lazy import in an <ErrorBoundary> and a loading state.

Navigation

Programmatic navigation goes through locationService from @grafana/runtime:

import { locationService } from '@grafana/runtime';

locationService.push('/d/abc/my-dashboard');
locationService.partial({ from: 'now-1h' }, true); // update query string

locationService is a thin wrapper over the React Router history that also synchronizes with Redux for components that need to react to URL changes.

Nav tree

The "left sidebar" is driven by the nav tree — a hierarchical structure built server-side by pkg/services/navtree/ and fetched at boot. Each node has a URL, icon, and (optional) RBAC requirement. The frontend consumes this via the navTree slice in core/reducers/.

App plugins contribute nav tree nodes via plugin.json and runtime extension points.

Routes that are not React

A handful of routes are intentionally server-rendered or non-SPA:

• /login — partly handled by the SPA but the form posts back to the server.
• /render/d-solo/... — image rendering snapshots.
• /api/* — REST API; never the SPA.
• /avatar/*, /public/* — static assets.

Permissions

Route guards use the RBAC permissions in contextSrv and the route descriptor's roles / permissions fields. Forbidden routes redirect to a 403 page.

See also

• Bootstrap and runtime — where routes are mounted.
• Core — Page, AppChrome, breadcrumbs.