Mobil uygulamalar büyüdükçe navigasyonu sürdürmek zorlaşır. Büyük createStackNavigator yapılandırmaları dosyalara yayılır ve bir ekran eklemek birkaç yeri birden düzenlemek demektir. Expo Router, dosya tabanlı yönlendirme ile uygulama yapısını daha sade ve öngörülebilir hâle getirir.
React Navigation üzerine inşa edilen Expo Router, modern Expo projelerinde önerilen navigasyon çözümü hâline geldi.
Dosya tabanlı yönlendirme
Her ekran bir dosyadır. Klasör yapısı doğrudan route tablosudur:
app/
_layout.tsx → kök layout
index.tsx → /
profile.tsx → /profile
posts/
[id].tsx → /posts/123
Navigasyon, web’deki gibi tip güvenli ve link tabanlı olur:
import { Link } from 'expo-router';
export default function Home() {
return <Link href="/posts/42">42 numaralı gönderiyi aç</Link>;
}
Senkron tutulması gereken merkezi bir config yoktur — dosya eklemek route eklemektir.
Nested layout desteği
Authentication akışı, bottom tab, stack ve modal’ların hepsi layout olarak ifade edilir. Bir tab bar, klasör içindeki _layout.tsx’ten ibarettir:
// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
export default function TabsLayout() {
return (
<Tabs>
<Tabs.Screen name="index" options={{ title: 'Ana Sayfa' }} />
<Tabs.Screen name="settings" options={{ title: 'Ayarlar' }} />
</Tabs>
);
}
(tabs) ve (auth) gibi route grupları, URL’yi değiştirmeden farklı layout uygulamanızı sağlar — korumalı ve herkese açık bölümleri temiz biçimde ayrı tutar.
Daha iyi geliştirici deneyimi
Deep linking, TypeScript desteği ve URL tabanlı yönlendirme varsayılan olarak gelir. Programatik navigasyon doğal okunur:
import { router } from 'expo-router';
router.push('/posts/42');
router.replace('/login');
router.back();
Sonuç
Expo Router, esneklikten ödün vermeden navigasyonu sadeleştirir. Dosya tabanlı yaklaşımı büyük React Native uygulamalarını bile düzenli tutar: route’lar klasör ağacından keşfedilebilir, layout’lar temiz biçimde birleşir ve deep linking ücretsiz gelir. Yeni Expo projelerinde başvurduğumuz varsayılan budur.