Rota tanımlama

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.)

Örnek çözümü göster

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

Kendini test et

URL /about ise hangi bileşen çizilir?
- Home
- Contact
- About
- NotFound
Cevabı göster

About — About bileşeni çizilir.

Route props

Route'un iki temel prop'u: path ve ____.

Cevabı göster

Route'un iki temel prop'u: path ve element.

Rota tanımlarını eşleştir

path

URL
element

bileşen
*

404
Routes

kapsayıcı

Sıradaki ders: Link ve NavLink

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler