Rota tanımlama
- React kursu
- Orta seviye
- Ders 38/80
- 4 dk
Routes ve Route ile rota ağacı kurmayı öğrenirsin.
Rota tanımlama
Birden çok rota tanımlamak için <Routes> içine birden çok <Route> eklersin. Her Route bir path ve element alır.
Örnek: <Route path="/" element={ '{ <Home /> }' } />, <Route path="/about" element={ '{ <About /> }' } />, <Route path="/contact" element={ '{ <Contact /> }' } />.
URL değişince React Router en uygun rotayı seçer. /about açılırsa About bileşeni çizilir. Eşleşen rota yoksa hiçbir şey çizilmez (ya da 404 rotası tanımlanır).
404 rotası
Eşleşmeyen URL'ler için bir 404 rotası tanımlanabilir. <Route path="*" element={ '{ <NotFound /> }' } /> tüm eşleşmeyen yolları yakalar.
* joker karakterdir; herhangi bir URL'i eşler. Bu rotayı en sona koymak önemlidir; çünkü React Router yukarıdan aşağıya eşleştirir.
404 sayfası kullanıcının kaybolmamasını sağlar. "Sayfa bulunamadı" mesajı ve ana sayfaya dönüş linki içerir. Bu, kullanıcı deneyimi için önemlidir.
Uygulama Üç rota tanımla
Aşağıdaki iskeleti tamamla. App bileşeni yaz. <Routes> içinde üç rota tanımla: <Route path="/" element={ '{ <Home /> }' } />, <Route path="/about" element={ '{ <About /> }' } />, <Route path="*" element={ '{ <NotFound /> }' } />. Dışa aktar. (Tüm bileşenlerin ithal edildiğini varsay.)
Başlangıç kodu
// App bileşenini buraya yazÖrnek çözüm
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 URL /about ise hangi bileşen çizilir?
- Home
- Contact
- About Doğru cevap
- NotFound
Açıklama: About bileşeni çizilir.
2 Route props
Route'un iki temel prop'u: path ve ____.Route'un iki temel prop'u: path ve element.Açıklama: element prop'u bileşeni alır.
3 Rota tanımlarını eşleştir
| Kavram | Anlamı |
|---|---|
path |
URL |
element |
bileşen |
* |
404 |
Routes |
kapsayıcı |