Özet - Router temelleri

Ana sayfa ve hakkında sayfası olan iki rotalı bir iskelet kurarsın.

Özet - Router temelleri

Bu grupta React Router'ın ne olduğunu, rota tanımlamayı ve Link/NavLink ile navigasyonu öğrendin. Artık temel SPA'lar kurabilirsin.

Reçete: BrowserRouter ile sar, Routes içinde Route tanımla, NavLink ile menü yap. 404 için path="*" rotası ekle. Bu dört adım, çalışan bir router kurar.

Bir sonraki adımda NavBar + Routes bir arada çalışan bir App bileşeni yazacaksın.

Uygulama App router + navbar

Aşağıdaki iskeleti tamamla. App bileşeni yaz. <BrowserRouter> içinde önce <NavBar />, sonra <Routes> içinde iki rota tanımla: <Route path="/" element={ '{ <Home /> }' } />, <Route path="/about" element={ '{ <About /> }' } />. Dışa aktar. (Tüm bileşenlerin ithal edildiğini varsay.)

Örnek çözümü göster

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

export default App;

Kendini test et

Hangisi sayfayı yeniden yükler?
- <a href>
- <Link to>
- <NavLink to>
- <Route>
Cevabı göster

<a href> — a href sayfayı yeniden yükler.
Router reçetesini eşleştir

BrowserRouter

sarar
Routes

kapsayıcı
Route

rota
NavLink

menü

Sıradaki ders: URL parametreleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler