{"id":99,"date":"2025-10-07T15:51:26","date_gmt":"2025-10-07T15:51:26","guid":{"rendered":"https:\/\/docs.pedagotchi.de\/?post_type=docs&#038;p=99"},"modified":"2025-10-08T08:39:47","modified_gmt":"2025-10-08T08:39:47","password":"","slug":"high-level-routing","status":"publish","type":"docs","link":"https:\/\/docs.pedagotchi.de\/index.php\/docs\/high-level-routing\/","title":{"rendered":"High-Level-Routing"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Ziel und Einordnung<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Rollen]<\/strong>\u00a0Expo Router \u00fcbernimmt das dateibasierte Routing unter\u00a0<code>app\/<\/code>. Der zentrale Context\u2010Controller wird \u00fcber Routen\u00e4nderungen informiert und kann Logik wie Tracking, Guards oder modulare Zustandswechsel ausl\u00f6sen.<\/li>\n\n\n\n<li><strong>[Abgrenzung]<\/strong>\u00a0Dieser Abschnitt beschreibt, wie das Frontend auf URL\u2011\u00c4nderungen h\u00f6rt und wie Navigation angesto\u00dfen wird. Die interne Context\u2011Routing\u2011Logik wird nur kurz gestreift; Details folgen in einem eigenen Kapitel zur Context\u2011Library.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Routenstruktur (Expo Router)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Dateibasiert]<\/strong>\u00a0Jede Datei\/Ordner in\u00a0<code>app\/<\/code>\u00a0entspricht einer Route. Beispiele:\n<ul class=\"wp-block-list\">\n<li>app\/index.tsx\u00a0\u2192\u00a0<code>\/<\/code><\/li>\n\n\n\n<li>app\/auth\/index.tsx\u00a0\u2192\u00a0<code>\/auth<\/code><\/li>\n\n\n\n<li><code>app\/auth\/(hideTabs)\/privacy.tsx<\/code>\u00a0\u2192\u00a0<code>\/auth\/privacy<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>[Layouts]<\/strong>\u00a0Dateien wie\u00a0app\/auth\/_layout.tsx\u00a0definieren gemeinsame Header\/Stack\/Tabs f\u00fcr einen Bereich.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Auf URL h\u00f6ren (Frontend)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Mechanik]<\/strong>\u00a0Mit\u00a0<code>usePathname()<\/code>\u00a0(Expo Router) wird der aktuelle Pfad gelesen. Ein\u00a0<code>useEffect<\/code>\u00a0meldet \u00c4nderungen an den Context\u2010Controller, damit zentrale Logik (z. B. Analytics, Feature\u2011Gates, Modulwechsel) greift.<\/li>\n\n\n\n<li><strong>[Beispiel]<\/strong>\u00a0In\u00a0app\/auth\/_layout.tsx:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app\/auth\/_layout.tsx (Kurz)\nimport { useContextControllerProvider } from \"@\/providers\/ContextControllerProvider\";\nimport { usePathname, SplashScreen, Stack } from \"expo-router\";\nimport { useEffect } from \"react\";\n\nexport default function AuthLayout() {\n  const context = useContextControllerProvider();\n  const pathname = usePathname();\n\n  useEffect(() => {\n    context.handleRouteChange(pathname);\n  }, &#91;pathname]);\n\n  SplashScreen.hideAsync(); \/\/ sobald bereit\n  return &lt;Stack \/* Header-Optionen *\/ \/>;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Wirkung]<\/strong>\u00a0Der Controller erh\u00e4lt den neuen Pfad und kann intern den\u00a0<code>RouteController<\/code>\/Module ansto\u00dfen, ohne dass Screens selbst die Orchestrierung \u00fcbernehmen.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Navigation aus der UI ausl\u00f6sen<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Direkt \u00fcber Expo Router]<\/strong>\u00a0F\u00fcr einfache Navigationsf\u00e4lle:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import { router } from \"expo-router\";\n\/\/ ...\nrouter.push(\"\/auth\/privacy\");       \/\/ neue Route pushen\n\/\/ router.replace(\"\/auth\");         \/\/ aktuellen Screen ersetzen<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Bevorzugt \u00fcber den Context\u2011Controller]<\/strong>\u00a0Einheitliche Navigation (Guards, Logging, zentrale Regeln):<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const { routeController } = useContextControllerProvider();\n\/\/ Beispiel: symbolische Zielroute + Params\nrouteController.navigateToNext(\"&#91;examination]\", { examinationId: 123 }, &#91;], false);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Empfehlung]<\/strong>\u00a0UI\u2011Komponenten sollten nach M\u00f6glichkeit \u00fcber den Controller navigieren, damit zentrale Regeln und Seiteneffekte konsistent angewendet werden.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Typische Anwendungsf\u00e4lle<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Auth\u2011Fluss]<\/strong>\u00a0Nach erfolgreichem Login triggert der Controller Navigation (z. B. zum Home\u2011Bereich). Die UI muss nur \u201eLogin geklickt\u201c melden.<\/li>\n\n\n\n<li><strong>[Detail\u2011Navigation]<\/strong>\u00a0Aus einer Liste heraus wird per Controller zur Detailroute navigiert, mit Parametern (IDs), die der Controller validiert\/aufbereitet.<\/li>\n\n\n\n<li><strong>[Externe Einfl\u00fcsse]<\/strong>\u00a0Wenn sich die URL \u00e4ndert (Deep\u2011Link, Zur\u00fcck\u2011Button), aktualisiert der Controller die modulare App\u2011Sicht, und die UI rendert reaktiv gem\u00e4\u00df Store\u2011Zust\u00e4nden.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fehler\u2011 und Ladekontrolle<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[Gating]<\/strong>\u00a0Der\u00a0ContextControllerProvider\u00a0rendert Kinder erst, wenn\u00a0<code>loaded<\/code>\u00a0gesetzt ist (siehe\u00a0providers\/ContextControllerProvider.tsx). So greifen Routen erst, wenn alle Module\/Stores bereit sind.<\/li>\n\n\n\n<li><strong>[Robustheit]<\/strong>\u00a0Navigation \u00fcber den Controller kann zentral pr\u00fcfen, ob Zielrouten verf\u00fcgbar sind (Rollen, Datenvoraussetzungen), und passende Fallbacks w\u00e4hlen.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Zusammenfassung<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expo Router definiert die Routenstruktur \u00fcber\u00a0<code>app\/<\/code>.<\/li>\n\n\n\n<li>Das Frontend h\u00f6rt mit\u00a0<code>usePathname()<\/code>\u00a0und\u00a0<code>useEffect<\/code>\u00a0auf Pfad\u00e4nderungen und informiert den Context\u2010Controller.<\/li>\n\n\n\n<li>Navigation kann direkt per\u00a0router.push(&#8230;)\u00a0oder \u2013 bevorzugt \u2013 \u00fcber den\u00a0<code>routeController<\/code>\u00a0erfolgen, um zentrale Logik (Guards, Tracking, Regeln) konsistent zu halten.<\/li>\n\n\n\n<li>Das Resultat ist ein schlankes UI, das Routen signalisiert und Navigationsintentionen ausl\u00f6st, w\u00e4hrend der Controller die Orchestrierung \u00fcbernimmt.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ziel und Einordnung Routenstruktur (Expo Router) Auf URL h\u00f6ren (Frontend) Navigation aus der UI ausl\u00f6sen Typische Anwendungsf\u00e4lle Fehler\u2011 und Ladekontrolle Zusammenfassung<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[4],"doc_tag":[],"class_list":["post-99","docs","type-docs","status-publish","hentry","doc_category-architekturueberblick"],"year_month":"2026-05","word_count":477,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"jon","author_nicename":"jon","author_url":"https:\/\/docs.pedagotchi.de\/index.php\/author\/jon\/"},"doc_category_info":[{"term_name":"Architektur\u00fcberblick","term_url":"https:\/\/docs.pedagotchi.de\/index.php\/docs-category\/architekturueberblick\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":2,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/99\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/99\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/doc_category?post=99"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/doc_tag?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}