Layout ve rota
- React kursu
- Orta seviye
- Ders 74/80
- 5 dk
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.
Başlangıç kodu
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";
// StatCard ve StatsPage bileşenlerini buraya yaz, sonra DashboardApp'i güncelleÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İç içe rotanın içeriği nerede basılır?
- useNavigate hook'unda
- useParams dönüşünde
- Ana rotanın Outlet'inde Doğru cevap
- BrowserRouter dışında
Açıklama: Ana rotanın element'inde Outlet olan yerde çocuk rota basılır.
2 StatCard destructuring
function StatCard({ ____ }) {
return (
<article>
<h3>{label}</h3>
<p>{value}</p>
</article>
);
}function StatCard({ label, value }) {
return (
<article>
<h3>{label}</h3>
<p>{value}</p>
</article>
);
}Açıklama: label ve value destructuring ile alınır.
3 Layout ve rota: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
StatCard |
Veri kartı |
label |
Başlık |
value |
Sayı |
article |
Kapsayıcı |