Proje: Çok sayfalı uygulama
- React kursu
- Orta seviye
- Ders 45/80
- 4 dk
Çok sayfalı uygulama projesinin amacını ve adımlarını gözden geçirirsin.
Proje: Çok sayfalı uygulama
Bu projede React Router ile üç sayfalı küçük bir uygulama yazacaksın: ana sayfa, ürün listesi ve ürün detayı. Her ders bir parça ekler; son derste 404 sayfasını bağlarsın.
Önce layout iskeletini kurarsın: BrowserRouter ile sarılı bir App, içinde Routes ve Route tanımları. Sonra listeyi, detayı ve yönlendirmeyi eklersin.
Proje bitince tek sayfa yerine çok sayfalı bir deneyim elde edersin; her sayfa kendi URL'sine sahip olur.
Routes ve Route
Routes bileşeni rotaların listesini taşır. İçinde her yol için bir Route bulunur: path yolu, element çizilecek bileşeni belirtir.
React Router v6'da Routes en iyi eşleşmeyi seçer; eski Switch yerine geçer. Birden fazla yol eşleşse bile yalnızca biri çizilir.
404 için path özniteliğine yıldız karakteri verilir; bu yol hiçbir başka yol eşleşmediğinde devreye girer ve 'bulunamadı' sayfasını çizer.
Uygulama App iskeleti
Aşağıdaki iskeleti tamamla. App bileşeni yaz; <BrowserRouter> içinde <Routes> ve bir <Route path="/" element={"{"<Home />}"} /> döndür. Dışa aktar.
Başlangıç kodu
import { BrowserRouter, Routes, Route } from "react-router-dom";
// App bileşenini buraya yazÖrnek çözüm
import { BrowserRouter, Routes, Route } from "react-router-dom";
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 Bu projede kaç sayfa çizilir?
- 1
- 3 Doğru cevap
- 2
- 4
Açıklama: Ana sayfa, ürün listesi ve ürün detayı olmak üzere 3 sayfa çizilir.
2 Router sarmalayıcı
import { BrowserRouter } from "react-router-dom";
function App() {
return <____ />;
}import { BrowserRouter } from "react-router-dom";
function App() {
return <BrowserRouter />;
}Açıklama: BrowserRouter tüm uygulamayı sarmalar.
3 Proje: Çok sayfalı uygulama: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
BrowserRouter |
Uygulama kabuğu |
Routes |
Rota listesi |
Route |
Tek yol |
path="*" |
404 yolu |