React Router nedir?
- React kursu
- Orta seviye
- Ders 37/80
- 4 dk
React Router ile istemci taraflı sayfa geçişlerini öğrenirsin.
React Router nedir?
React Router, tek sayfa uygulamada (SPA) sayfa geçişlerini yöneten kütüphanedir. URL değişince sayfa yenilenmeden ilgili bileşen çizilir.
Normal bir sitede her link tüm sayfayı yeniden yükler. SPA'da ise yalnızca URL değişir ve React Router ilgili bileşeni çizilir. Bu, hızlı ve akıcı bir deneyim sağlar.
İskelet: <BrowserRouter> ile uygulamayı sar, <Routes> içinde <Route path="/" element={ '{ <Home /> }' } /> tanımla. Navigasyon için <Link to="/about"> kullanılır.
Üç ana bileşen
React Router'ın üç ana bileşeni vardır: BrowserRouter (uygulamayı sarar), Routes (rotalar kapsayıcısı), Route (tek rota tanımı).
<BrowserRouter> en üst seviyededir; tüm uygulamayı sarmalar. <Routes> içinde birden çok <Route> bulunur; URL'e göre biri seçilir.
Navigasyon için <Link to="..."> kullanılır. <a href> yerine Link tercih edilir; çünkü a sayfayı yeniden yükler, Link ise yalnızca URL'i değiştirir.
Uygulama Router iskeleti
Aşağıdaki iskeleti tamamla. App bileşeni yaz. <BrowserRouter> içinde <Routes> ve bir <Route path="/" element={ '{ <Home /> }' } /> tanımla. Dışa aktar. (BrowserRouter, Routes, Route, Home'un ithal edildiğini varsay.)
Başlangıç kodu
// App bileşenini buraya yazÖrnek çözüm
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React Router neyi yönetir?
- useEffect'i
- Sayfa geçişlerini Doğru cevap
- CSS'i
- useState'i
Açıklama: Sayfa geçişlerini yönetir.
2 SPA
SPA açılımı ____.SPA açılımı Single Page Application.Açıklama: SPA = Single Page Application.
3 Router parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
BrowserRouter |
sarar |
Routes |
kapsayıcı |
Route |
tek rota |
Link |
navigasyon |