Expo Router v4 mit Claude Code: File-Based Navigation 2026

# Prompt: "Entwirf Expo Router Struktur fuer SaaS-App mit Auth" app/ _layout.tsx # Root Layout (Provider, Theme) index.tsx # / (Landing Page) (auth)/ # Gruppen-Prefix — kein URL-Segment! _layout.tsx # Auth-Layout (zentrierter Card) sign-in.tsx # /sign-in sign-up.tsx # /sign-up (app)/ # Geschuetzter Bereich _layout.tsx # App-Layout mit Tab-Bar (tabs)/ _layout.tsx # Tab-Navigator home.tsx # /home (Tab 1) explore.tsx # /explore (Tab 2) profile.tsx # /profile (Tab 3) project/ [id].tsx # /project/[id] (dynamisch) [id]/ settings.tsx # /project/[id]/settings +not-found.tsx # 404-Handler api/ # API Routes (Expo Router v4!) users+api.ts # GET/POST /api/users // _layout.tsx Root: import { Stack } from 'expo-router'; export default function RootLayout() { return ( <ThemeProvider> <Stack screenOptions={{ headerShown: false }}> <Stack.Screen name="(auth)" /> <Stack.Screen name="(app)" /> </Stack> </ThemeProvider> ); }

// app/(app)/(tabs)/_layout.tsx import { Tabs } from 'expo-router'; import { Ionicons } from '@expo/vector-icons'; export default function TabLayout() { return ( <Tabs screenOptions={{ tabBarActiveTintColor: '#6366f1', tabBarStyle: { borderTopColor: '#e2e8f0' }, headerShown: false, }} > <Tabs.Screen name="home" options={{ title: "Home", tabBarIcon: ({ color, size }) => ( <Ionicons name="home" size={size} color={color} /> ), }} /> <Tabs.Screen name="explore" options={{ title: "Explore", tabBarIcon: ({ color, size }) => ( <Ionicons name="search" size={size} color={color} /> ), tabBarBadge: 3, // Notification Badge }} /> </Tabs> ); } // Stack mit Custom Header in einer Tab-Screen: export default function HomeTab() { return ( <Stack> <Stack.Screen name="index" options={{ title: "Dashboard" }} /> <Stack.Screen name="details" options={{ title: "Details", headerBackTitle: "Zurueck" }} /> </Stack> ); }

// app/project/[id].tsx — Dynamische Route import { useLocalSearchParams, router, Link } from 'expo-router'; export default function ProjectScreen() { const { id } = useLocalSearchParams<{ id: string }>(); return ( <View> <Text>Project {id}</Text> // Typisierter Link: <Link href={`/project/${id}/settings`}>Settings</Link> // Programmatische Navigation: <Button title="Zurueck" onPress={() => router.back()} /> // Mit Params: <Button title="Edit" onPress={() => router.push({ pathname: '/project/[id]/edit', params: { id } })} /> </View> ); } // app.json — Deep Link Schema { "expo": { "scheme": "myapp", // myapp://project/123 oeffnet app/project/[id].tsx "web": { "bundler": "metro" } } }

// app/api/users+api.ts — GET und POST Handler import { ExpoRequest, ExpoResponse } from 'expo-router/server'; export async function GET(req: ExpoRequest): Promise<ExpoResponse> { const users = await db.user.findMany(); return ExpoResponse.json(users); } export async function POST(req: ExpoRequest): Promise<ExpoResponse> { const body = await req.json(); const user = await db.user.create({ data: body }); return ExpoResponse.json(user, { status: 201 }); } // app/api/user/[id]+api.ts — Dynamische API Route: export async function GET(req: ExpoRequest, { id }: { id: string }) { const user = await db.user.findUnique({ where: { id } }); if (!user) return ExpoResponse.json({ error: 'Not found' }, { status: 404 }); return ExpoResponse.json(user); }