Özet - Router temelleri
- React kursu
- Orta seviye
- Ders 40/80
- 5 dk
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.)
Başlangıç kodu
// App bileşenini buraya yazÖrnek çözüm
function App() {
return (
<BrowserRouter>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi sayfayı yeniden yükler?
- <a href> Doğru cevap
- <Link to>
- <NavLink to>
- <Route>
Açıklama: a href sayfayı yeniden yükler.
2 Router reçetesini eşleştir
| Kavram | Anlamı |
|---|---|
BrowserRouter |
sarar |
Routes |
kapsayıcı |
Route |
rota |
NavLink |
menü |