Protected routes
- React Native kursu
- İleri seviye
- Ders 46/83
- 5 dk
Protected route ve navigation guard öğrenirsin.
Protected route
Protected route, yalnızca giriş yapmış kullanıcıların görebileceği ekranlardır. Kullanıcı giriş yapmadıysa login ekranına yönlendirilir. Bunu yapmak için ekranda bir guard kontrolü yapılır: if (!user) return <Navigate to='Login' />.
React Navigation ile bu, useEffect ve useNavigation ile yapılır. Ekrana girildiğinde user kontrol edilir; yoksa navigation.replace('Login') çağrılır. Bu sayede korumalı içerik giriş yapmamış kullanıcıya görünmez.
Navigation guard
Guard, ekran açıldığında çalışan bir useEffect içinde yazılır. useEffect'in bağımlılık dizisinde user olmalı; böylece kullanıcı değiştiğinde kontrol yeniden çalışır. Boş dizi verirsen açılışta yalnızca bir kez çalışır.
İçeride if (!user) navigation.replace('Login') yazılır. replace, geri tuşunun login'e dönmesini engeller; navigate yerine tercih edilir. Böylece kullanıcı geri basınca uygulamadan çıkar; login'e geri dönmez.
Uygulama ProtectedScreen yaz
ProtectedScreen bileşenini tamamla. useContext(AuthContext) ile user'ı al. useEffect içinde if (!user) navigation.replace('Login') yaz. useEffect bağımlılık dizisinde user olsun.
Başlangıç kodu
import React, { useContext, useEffect } from 'react';
import { Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { AuthContext } from './AuthContext';
export function ProtectedScreen() {
const { user } = useContext(AuthContext);
const navigation = useNavigation();
// guard yaz
return (
<View>
<Text>Hosgeldin</Text>
</View>
);
}Örnek çözüm
import React, { useContext, useEffect } from 'react';
import { Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { AuthContext } from './AuthContext';
export function ProtectedScreen() {
const { user } = useContext(AuthContext);
const navigation = useNavigation();
useEffect(() => {
if (!user) navigation.replace('Login');
}, [user]);
return (
<View>
<Text>Hosgeldin</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Guard parçalarını eşle
| Kavram | Anlamı |
|---|---|
useEffect |
Açılışta kontrolü yapar |
useNavigation |
Yönlendirme sağlar |
navigation.replace |
Login'e atlar |
AuthContext |
user bilgisini verir |
2 Yönlendirme çağrısı
if (!user) {
navigation.____('Login');
}if (!user) {
navigation.replace('Login');
}Açıklama: replace, geri tuşunu engeller.
3 Guard neden replace tercih eder?
- Geri tuşunun login'e dönmesini engellemek için
- Daha hızlı animasyon için
- Stilleri değiştirmek için Doğru cevap
- Daha az bellek için
Açıklama: replace, geri tuşunun login'e dönmesini engeller.