React Router
React Router, modern React uygulamalarında sayfa yönlendirmelerini yönetmek için kullanılan temel bir kütüphanedir. Tek sayfa uygulamaları (SPA) geliştirirken, kullanıcı deneyimini kesintisiz tutmak ve sayfalar arasında hızlı geçiş sağlamak için kullanılır. React Router, URL’leri bileşenlerle eşleştirerek, navigasyonu deklaratif bir şekilde yönetmemizi sağlar. Bu sayede kullanıcı, sayfa yenilemesi olmadan farklı bileşenleri görüntüleyebilir.
React Router, bir uygulamada birden fazla görünüm, dinamik içerik veya kullanıcı yetkilendirmesi gereken durumlarda kullanılır. Bu bağlamda, React’in temel kavramları olan bileşenler, state yönetimi, veri akışı ve bileşen yaşam döngüsü ile doğrudan entegre çalışır. Kullanıcıların prop drilling, gereksiz yeniden render veya state mutasyonları gibi yaygın hatalardan kaçınmasına yardımcı olur.
Bu eğitimde okuyucu, statik ve dinamik rotaların nasıl oluşturulduğunu, Link ve Navigate bileşenleri ile navigasyonun nasıl gerçekleştirildiğini ve useParams hook’u ile URL parametrelerinin nasıl yönetileceğini öğrenecek. Ayrıca ProtectedRoute ile güvenli rotalar oluşturma, bileşenleri yeniden kullanılabilir şekilde tasarlama ve performans optimizasyonu gibi ileri seviye konseptler de ele alınacaktır.
Temel Örnek
jsximport React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function Home() {
return <h2>Anasayfa</h2>;
}
function About() {
return <h2>Hakkında</h2>;
}
function App() {
return ( <Router> <nav> <Link to="/">Anasayfa</Link> | <Link to="/about">Hakkında</Link> </nav> <Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} /> </Routes> </Router>
);
}
export default App;Bu temel örnekte BrowserRouter, uygulamayı sarmalayarak rotalama için gerekli bağlamı sağlar. Routes tüm rotaları gruplar, Route ise her bir URL’yi belirli bir bileşene bağlar. Link bileşeni, sayfa yenilenmeden navigasyon yapılmasını sağlar ve state’in korunmasına yardımcı olur.
Home ve About bileşenleri basit işlevsel bileşenlerdir ve sorumlulukları ayrılmıştır. Bu örnek, React Router’ın temel özelliklerini; deklaratif routing, navigasyon bileşenleri ve performans odaklı state yönetimi ile birleştirerek gösterir.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams, Navigate } from 'react-router-dom';
function Dashboard() {
const [user, setUser] = useState(null);
useEffect(() => {
setTimeout(() => setUser({ name: 'Ayşe', role: 'admin' }), 1000);
}, []);
if (!user) return <p>Yükleniyor...</p>;
return <h2>Hoşgeldin, {user.name}, Dashboard’a</h2>;
}
function Profile() {
const { username } = useParams();
return <h2>Kullanıcı Profili: {username}</h2>;
}
function ProtectedRoute({ children }) {
const isAuthenticated = true;
return isAuthenticated ? children : <Navigate to="/" />;
}
function App() {
return ( <Router> <nav> <Link to="/">Anasayfa</Link> | <Link to="/dashboard">Dashboard</Link> | <Link to="/profile/Ayşe">Profil</Link> </nav> <Routes>
<Route path="/" element={<h2>Anasayfa</h2>} />
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/profile/:username" element={<Profile />} /> </Routes> </Router>
);
}
export default App;Bu gelişmiş örnekte, Dashboard bileşeni useState ve useEffect kullanarak asenkron veri yüklemesini gösterir ve bileşen yaşam döngüsünü yönetir. Profile bileşeni useParams ile dinamik URL parametrelerini alır ve prop drilling ihtiyacını ortadan kaldırır.
ProtectedRoute, kullanıcı doğrulamasını kontrol eder ve yetkisiz erişim durumunda Navigate ile yönlendirme yapar. Bu yapı, bileşenlerin yeniden kullanılabilir olmasını, performansın optimize edilmesini ve güvenli rotaların oluşturulmasını sağlar. Modern React uygulamaları için bu yöntemler kritik öneme sahiptir.
React Router ile çalışırken iyi uygulamalar, bileşenleri yeniden kullanılabilir şekilde tasarlamak, state yönetimini optimize etmek, dinamik rotalar oluşturmak ve bileşen yaşam döngüsünü etkin kullanmaktır. Kaçınılması gereken hatalar arasında state mutasyonları, prop drilling ve gereksiz yeniden renderlar bulunur. Debugging için React DevTools kullanımı, performans optimizasyonu için React.memo ve useCallback, büyük bileşenlerde lazy loading ve Suspense kullanımı önerilir. Güvenli rotalar için ise yetkilendirme kontrolleri şarttır.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| BrowserRouter | Rotalama bağlamını sağlar | <BrowserRouter><App /></BrowserRouter> |
| Routes | Tüm rotaları gruplar | <Routes><Route path="/" element={<Home />} /></Routes> |
| Route | URL path ile bileşen eşleştirir | <Route path="/about" element={<About />} /> |
| Link | Sayfa yenilenmeden navigasyon sağlar | <Link to="/about">Hakkında</Link> |
| useParams | Dinamik URL parametrelerini alır | const { id } = useParams(); |
| Navigate | Programatik yönlendirme yapar | <Navigate to="/login" /> |
React Router, SPA’lerde navigasyonu deklaratif şekilde yönetmek için güçlü bir araçtır. Statik ve dinamik rotaları yönetmeyi, rotaları güvence altına almayı ve state ile yaşam döngüsünü etkili kullanmayı öğrenmek, sağlam ve performanslı React uygulamaları geliştirmek için kritiktir. İleri seviye konular olarak lazy loading, Context API veya Redux entegrasyonu ve performans optimizasyon teknikleri incelenebilir ve gerçek projelerde uygulanabilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek