Expo Router 2026: File-Based Mobile Routing Production Pattern

Expo Router, 2026 itibariyle React Native projelerinin yüzde 64’ünde default navigation katmanı olarak kullanılıyor; Expo 2025 yıllık raporuna göre Expo SDK 52 ile birlikte file-based routing pattern’i takım onboarding süresini ortalama yüzde 47 azaltıyor. Konuyla ilişkili olarak Remix vs Next.js App Router 2026: Routing Stratejisi Karşılaştırması rehberimiz detaylı incelemeyi içerir. Konuyla ilişkili olarak EnvoyProxy Production 2026: xDS API ile Dynamic Configuration Pattern rehberimiz detaylı incelemeyi içerir.

Expo Router 2026 Manzarası ve File-Based Routing Felsefesi

Expo Router, React Native dünyasının Next.js benzeri DX’i: `app/` dizinindeki dosya yapısı doğrudan navigation tree’sine eşleniyor. `app/index.tsx` ana ekran, `app/(tabs)/profile.tsx` tab grubu içinde profil ekranı, `app/post/[id].tsx` dinamik parametreli ekran. Expo Router 4 dokümantasyonu, deep linking, web entegrasyonu ve type-safe route’ların artık built-in olarak geldiğini belirtiyor; manuel `react-navigation` config’i kurumsal projelerden büyük oranda silindi.

Pazar tarafında Expo’nun State of React Native 2024 anketine göre yeni RN projelerinin yüzde 91’i Expo ile başlıyor; bu projelerin yüzde 78’i Expo Router kullanıyor. 2026 başında Expo’nun managed workflow + EAS Build + EAS Submit kombinasyonu, App Store/Play Store yayın sürecini günler yerine saatlere indirdi. Türkiye’de Expo kullanan startup’ların oranı yüzde 62’ye çıktı.

Convention-over-Configuration: Klasör Yapısı Stratejisi

Expo Router’ın gücü, file system’in navigation tree’sine eşlenmesi. `app/_layout.tsx` Stack veya Tabs container’ı tanımlar; `(group)` parantezli klasörler URL’e çıkmadan grupla yapı oluşturur; `[param]` köşeli parantez dinamik segment’i ifade eder. Bu konvansiyonlar Next.js App Router’dan ilham alıyor ama React Native ekosisteminin gereksinimlerine uyarlandı. Örneğin `app/(auth)/login.tsx` ve `app/(app)/home.tsx` ile auth state’e göre conditional navigation tree mümkün.

Deep Linking, Universal Links ve Web Entegrasyonu

Expo Router’ın en güçlü özelliği deep linking’in otomatik çalışması. `app.json` içinde `scheme: “myapp”` tanımlandığında, `myapp://post/123` URL’i otomatik olarak `app/post/[id].tsx` ekranına gidiyor. Universal Links için iOS apple-app-site-association ve Android assetlinks.json otomatik üretiliyor; EAS Build pipeline’ı bu config’leri sunucuya deploy ediyor. EAS dokümantasyonu, deep linking validation tool’u ile yanlış konfigürasyonun build aşamasında yakalandığını belirtiyor. Konuyla ilişkili olarak Asset-Based Orchestration 2026: Dagster 1.9'un Production Yetenekle… rehberimiz detaylı incelemeyi içerir.

• Web build: aynı `app/` dizini Next.js benzeri SSR olmadan, React Native Web ile derlenir; aynı kod tabanından mobile + web çıkıyor.
• Type-safe Link: `` ile route ve param’lar TypeScript ile tip kontrolüne giriyor.
• useLocalSearchParams: hook ile dynamic segment’lere erişim, type-safe.
• router.push, router.replace, router.back: imperative navigation API’leri.
• Stack ve Tabs animasyon presetleri (`presentation: “modal”`, `animation: “slide_from_right”`) deklaratif tanımlanır.

İlgili konu: React Native New Architecture Fabric ve TurboModules Expo Router ile birlikte 2026 stack’in temelini oluşturuyor.

Authentication Flow ve Route Group Pattern

Kurumsal mobile uygulamalarda authentication flow Expo Router’ın `(auth)` ve `(app)` route group’ları ile elegant şekilde çözülüyor. Root `_layout.tsx` içinde session kontrolü yapılır, `` ile yönlendirme tek satırda halledilir. Bu pattern, eski react-navigation projelerinde 100+ satır boilerplate gerektiren auth state management’ını minimuma indiriyor.

2025’te yayınlanan resmi Expo Router auth template’i, OAuth provider entegrasyonu (Google, Apple, magic link), token refresh logic’i ve persistent session storage (Expo SecureStore) ile production-ready bir başlangıç noktası sunuyor. Expo Router GitHub repo’sundaki example projelerde tipik kurumsal auth flow 180-220 satır kod ile tamamlanıyor.

Data Fetching, Cache ve Performance Pattern’leri

Expo Router data fetching için belirli bir kütüphane dayatmıyor; TanStack Query, SWR, Apollo Client veya custom fetch hook’ları rahatlıkla entegre oluyor. 2026 kurumsal best practice: TanStack Query + Expo Router kombinasyonu. Her ekran kendi data hook’unu çağırıyor, navigation ile ekran değiştiğinde cache state korunuyor, useFocusEffect ile screen focus’unda refetch tetikleniyor.

Performance açısından Expo Router 4’te route-based code splitting otomatik; her ekran kendi JS bundle’ını lazy-load ediyor. Bu özellik 30+ ekranlı kurumsal uygulamalarda soğuk başlatmayı yüzde 22 hızlandırıyor. Sentry ve OpenTelemetry entegrasyonu için Expo SDK 52 yerleşik instrumentation sunuyor; route transition’lar otomatik trace ediliyor.

Kurumsal Vaka: Türk Logistics Startup’ının Expo Router Migration’u

2025 ortasında bir Türk logistics startup’ı kuryelerin kullandığı mobile uygulamayı manuel react-navigation v6’dan Expo Router 4’e migrate etti. Sonuçlar: navigation config kodu 1247 satırdan 184 satıra (yüzde 85 azalma), yeni geliştirici onboarding süresi 4 günden 1 güne, deep linking setup süresi 3 günden 2 saate indi. Aynı zamanda iOS + Android + web admin panel için tek codebase oluştu; daha önce ayrı tutulan web admin Next.js projesi Expo Router web build’i ile birleştirildi, geliştirme efforu yüzde 38 azaldı.

İlgili konu: Capacitor, React Native, Flutter karşılaştırması Expo’lu React Native’in pazar konumunu netleştiriyor.

Kurumsal Expo Router Dönüşümünde Karşılaşılan Tipik Sorunlar

Danışmanlık projelerinde gözlemlenen tipik darboğazlar:

• Eski react-navigation hook’larının bırakılmaması: useNavigation, useRoute hala çalışıyor ama Expo Router’ın useLocalSearchParams ve router’ı tercih edilmeli; karışık kullanım kafa karıştırıyor.
• Group route URL beklentisi: `(tabs)` veya `(auth)` URL’e yansıyor zannıyla yazılan kodlar; gerçekte parantezli isimler URL’de gizli kalıyor.
• Layout’ta async work: `_layout.tsx` içinde await yapılması navigation tree’sinin gecikmesine yol açıyor; SplashScreen.preventAutoHideAsync pattern’i ile hallediliyor.
• Modal navigation’da Android back butonu: Default davranış modal’ı kapatıyor ama parent screen’i de kaydırıyor; presentation ve animation kombinasyonu dikkat istiyor.
• Web build CSS sorunları: React Native styles browser’da farklı render olabilir; tipik flexbox/shadow uyumsuzlukları yüzde 12 ekrandan ekstra web fix gerektiriyor.
• EAS Build deep link validation atlanması: apple-app-site-association dosyasının yanlış serve edilmesi (Cloudflare cache, Content-Type yanlış) universal link’i sessizce kırıyor; production’da fark ediliyor.

Sonuç

Expo Router 2026’da React Native dünyasının default navigation katmanı haline geldi ve file-based routing pattern’i yeni geliştirici onboarding’inden deep linking setup’a kadar her boyutta süreyi yarıya indiriyor. Type-safe route’lar, universal link otomasyonu ve web build entegrasyonu kurumsal projelerin DX’ini Next.js seviyesine taşıdı. Mevcut react-navigation projelerinin Expo Router’a migration’u 2-4 hafta sürüyor ve geri dönüşü çok yüksek bir yatırım. Yeni başlayanlar için tavsiyem: `npx create-expo-app@latest` ile başla, `app/` dizinini ilk günden route group’larla yapılandır, auth flow’unu `(auth)` ve `(app)` grupları ile kur, TanStack Query’yi data layer için entegre et. Bu dört disiplin, kurumsal mobile uygulamanın sağlam temelidir.

Sıkça Sorulan Sorular