Ziel und Einordnung #

• [Rollen] Expo Router übernimmt das dateibasierte Routing unter app/. Der zentrale Context‐Controller wird über Routenänderungen informiert und kann Logik wie Tracking, Guards oder modulare Zustandswechsel auslösen.
• [Abgrenzung] Dieser Abschnitt beschreibt, wie das Frontend auf URL‑Änderungen hört und wie Navigation angestoßen wird. Die interne Context‑Routing‑Logik wird nur kurz gestreift; Details folgen in einem eigenen Kapitel zur Context‑Library.

Routenstruktur (Expo Router) #

• [Dateibasiert] Jede Datei/Ordner in app/ entspricht einer Route. Beispiele:
  • app/index.tsx → /
  • app/auth/index.tsx → /auth
  • app/auth/(hideTabs)/privacy.tsx → /auth/privacy
• [Layouts] Dateien wie app/auth/_layout.tsx definieren gemeinsame Header/Stack/Tabs für einen Bereich.

Auf URL hören (Frontend) #

• [Mechanik] Mit usePathname() (Expo Router) wird der aktuelle Pfad gelesen. Ein useEffect meldet Änderungen an den Context‐Controller, damit zentrale Logik (z. B. Analytics, Feature‑Gates, Modulwechsel) greift.
• [Beispiel] In app/auth/_layout.tsx:

// app/auth/_layout.tsx (Kurz)
import { useContextControllerProvider } from "@/providers/ContextControllerProvider";
import { usePathname, SplashScreen, Stack } from "expo-router";
import { useEffect } from "react";

export default function AuthLayout() {
  const context = useContextControllerProvider();
  const pathname = usePathname();

  useEffect(() => {
    context.handleRouteChange(pathname);
  }, [pathname]);

  SplashScreen.hideAsync(); // sobald bereit
  return <Stack /* Header-Optionen */ />;
}

• [Wirkung] Der Controller erhält den neuen Pfad und kann intern den RouteController/Module anstoßen, ohne dass Screens selbst die Orchestrierung übernehmen.

Navigation aus der UI auslösen #

• [Direkt über Expo Router] Für einfache Navigationsfälle:

import { router } from "expo-router";
// ...
router.push("/auth/privacy");       // neue Route pushen
// router.replace("/auth");         // aktuellen Screen ersetzen

• [Bevorzugt über den Context‑Controller] Einheitliche Navigation (Guards, Logging, zentrale Regeln):

const { routeController } = useContextControllerProvider();
// Beispiel: symbolische Zielroute + Params
routeController.navigateToNext("[examination]", { examinationId: 123 }, [], false);

• [Empfehlung] UI‑Komponenten sollten nach Möglichkeit über den Controller navigieren, damit zentrale Regeln und Seiteneffekte konsistent angewendet werden.

Typische Anwendungsfälle #

• [Auth‑Fluss] Nach erfolgreichem Login triggert der Controller Navigation (z. B. zum Home‑Bereich). Die UI muss nur „Login geklickt“ melden.
• [Detail‑Navigation] Aus einer Liste heraus wird per Controller zur Detailroute navigiert, mit Parametern (IDs), die der Controller validiert/aufbereitet.
• [Externe Einflüsse] Wenn sich die URL ändert (Deep‑Link, Zurück‑Button), aktualisiert der Controller die modulare App‑Sicht, und die UI rendert reaktiv gemäß Store‑Zuständen.

Fehler‑ und Ladekontrolle #

• [Gating] Der ContextControllerProvider rendert Kinder erst, wenn loaded gesetzt ist (siehe providers/ContextControllerProvider.tsx). So greifen Routen erst, wenn alle Module/Stores bereit sind.
• [Robustheit] Navigation über den Controller kann zentral prüfen, ob Zielrouten verfügbar sind (Rollen, Datenvoraussetzungen), und passende Fallbacks wählen.

Zusammenfassung #

• Expo Router definiert die Routenstruktur über app/.
• Das Frontend hört mit usePathname() und useEffect auf Pfadänderungen und informiert den Context‐Controller.
• Navigation kann direkt per router.push(…) oder – bevorzugt – über den routeController erfolgen, um zentrale Logik (Guards, Tracking, Regeln) konsistent zu halten.
• Das Resultat ist ein schlankes UI, das Routen signalisiert und Navigationsintentionen auslöst, während der Controller die Orchestrierung übernimmt.