React
Layout ve rota
DashboardLayout ve iç içe rotaları kurarsın.
İstatistik rotası
Bu derste /stats rotasına istatistik widget'ı ekleyeceğiz. Layout bir önceki derste kuruldu; şimdi içerik geliyor.
React Router'da iç içe rotalar, ana rotanın element'inde <Outlet> gösterilerek çalışır. URL'e göre çocuk rotanın elemanı basılır.
Bu derste basit bir StatsPage ekleyip ileride StatCard ile dolduracağız.
StatCard iskeleti
StatCard bileşeni { label, value } proplarını alır. Bir <article> içinde <h3> ve <p> basar. Bu yapı, veriyi düzenli gösterir.
Props destructure edilir: function StatCard({ label, value }). Bu, props.label yazmaktan kısa ve okunaklıdır.
Bu dersin başlangıç kodunda önceki layout çözümü var; sen StatCard ekleyip StatsPage'te kullanacaksın.
Uygulama StatsPage ve StatCard
StatCard bileşeni yaz: { label, value } proplarını destructure et, <article> içinde <h3>{label}</h3> ve <p>{value}</p> bas. StatsPage bileşeni yaz: iki <StatCard> basar (label="Kullanıcı" value=120 ve label="Sipariş" value=45). DashboardApp'te path="stats" rotasının element'ini <StatsPage /> yap. export default DashboardApp.
Örnek çözümü göster
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";
function StatCard({ label, value }) {
return (
<article>
<h3>{label}</h3>
<p>{value}</p>
</article>
);
}
function StatsPage() {
return (
<section>
<StatCard label="Kullanıcı" value={120} />
<StatCard label="Sipariş" value={45} />
</section>
);
}
function DashboardLayout() {
return (
<>
<nav>
<NavLink to="/stats">İstatistik</NavLink>
</nav>
<main>
<Outlet />
</main>
</>
);
}
function DashboardApp() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<DashboardLayout />}>
<Route path="stats" element={<StatsPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default DashboardApp;
Kendini test et
-
İç içe rotanın içeriği nerede basılır?
- useNavigate hook'unda
- useParams dönüşünde
- Ana rotanın Outlet'inde
- BrowserRouter dışında
Cevabı göster
Ana rotanın Outlet'inde — Ana rotanın element'inde Outlet olan yerde çocuk rota basılır.
-
StatCard destructuring
function StatCard({ ____ }) {
return (
<article>
<h3>{label}</h3>
<p>{value}</p>
</article>
);
}
Cevabı göster
function StatCard({ label, value }) {
return (
<article>
<h3>{label}</h3>
<p>{value}</p>
</article>
);
}
-
Layout ve rota: kavramları eşleştir
- StatCard
- Veri kartı
- label
- Başlık
- value
- Sayı
- article
- Kapsayıcı
Sıradaki ders: İstatistik widget'ı
