React Native'de navigasyon her zaman biraz çirkin hissettirdi. Stack tanımları, tip bildirimleri, navigate('ScreenName', { params }) çağrıları — hepsi ayrı dosyalarda, manuel olarak senkronize edilmesi gereken bir yapı. Expo Router bunu kökten değiştirdi.
Dosya Sistemi = Navigasyon
Next.js'i biliyorsanız konsept tanıdık: app/ klasörünüzdeki dosya yapısı, uygulamanızın navigasyon yapısını belirler.
app/
index.tsx → /
profile.tsx → /profile
sessions/
index.tsx → /sessions
[id].tsx → /sessions/:id
Bunun en büyük avantajı: navigasyon yapısını anlamak için kod okumak gerekmez. Klasör yapısına bakmak yeterli.
Tip Güvenliği
Expo Router v3 ile birlikte gelen expo-router/types otomatik tip üretimi oyun değiştirici.
Eski React Navigation yöntemi:
// Tüm ekranları manuel tanımlamak gerekiyordu
type RootStackParamList = {
Home: undefined;
Session: { id: string };
Profile: { userId: number };
};
navigation.navigate('Session', { id: '123' });
Expo Router ile:
import { router } from 'expo-router';
// Tip otomatik çıkarılır, yanlış path yazarsanız TypeScript hata verir
router.push('/sessions/123');
Rota adlarını string olarak yazmak yerine artık gerçek dosya yolları kullanıyorsunuz. TypeScript bunları kontrol ediyor.
Layout Grupları
Uygulamanın farklı bölümleri için farklı layout'lar tanımlamak çok temiz:
app/
(auth)/
login.tsx
register.tsx
(app)/
_layout.tsx → Tab navigatoru burada
index.tsx
sessions/
index.tsx
[id].tsx
Parentez içindeki klasörler ((auth), (app)) URL'e yansımaz ama layout gruplama için kullanılır. Auth ekranlarına tab bar gelmez, app ekranlarına gelir.
Geçiş Sürecinde Öğrendiklerim
Boulder Tracker'ı React Navigation'dan Expo Router'a geçirirken iki hafta harcadım. Geriye dönünce değdi mi? Kesinlikle. Ama şunu söylemeliyim: eğer projeniz küçük ve navigasyon yapınız basitse, bu geçiş için acele etmeyin.
Expo Router'ın gerçek değeri, uygulama büyüdükçe ortaya çıkıyor. 5 ekranlı uygulamada fark küçük. 30 ekranlı uygulamada dosya sistemi navigasyonu sizi kurtarıyor.