Proje: Çok sayfalı uygulama

Çok sayfalı uygulama projesinin amacını ve adımlarını gözden geçirirsin.

Proje: Çok sayfalı uygulama

Bu projede React Router ile üç sayfalı küçük bir uygulama yazacaksın: ana sayfa, ürün listesi ve ürün detayı. Her ders bir parça ekler; son derste 404 sayfasını bağlarsın.

Önce layout iskeletini kurarsın: BrowserRouter ile sarılı bir App, içinde Routes ve Route tanımları. Sonra listeyi, detayı ve yönlendirmeyi eklersin.

Proje bitince tek sayfa yerine çok sayfalı bir deneyim elde edersin; her sayfa kendi URL'sine sahip olur.

Routes ve Route

Routes bileşeni rotaların listesini taşır. İçinde her yol için bir Route bulunur: path yolu, element çizilecek bileşeni belirtir.

React Router v6'da Routes en iyi eşleşmeyi seçer; eski Switch yerine geçer. Birden fazla yol eşleşse bile yalnızca biri çizilir.

404 için path özniteliğine yıldız karakteri verilir; bu yol hiçbir başka yol eşleşmediğinde devreye girer ve 'bulunamadı' sayfasını çizer.

Uygulama App iskeleti

Aşağıdaki iskeleti tamamla. App bileşeni yaz; <BrowserRouter> içinde <Routes> ve bir <Route path="/" element={"{"<Home />}"} /> döndür. Dışa aktar.

Örnek çözümü göster

import { BrowserRouter, Routes, Route } from "react-router-dom";

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

export default App;

Kendini test et

Bu projede kaç sayfa çizilir?
- 1
- 3
- 2
- 4
Cevabı göster

3 — Ana sayfa, ürün listesi ve ürün detayı olmak üzere 3 sayfa çizilir.

Router sarmalayıcı

import { BrowserRouter } from "react-router-dom";

function App() {
  return <____ />;
}

Cevabı göster

import { BrowserRouter } from "react-router-dom";

function App() {
  return <BrowserRouter />;
}

Proje: Çok sayfalı uygulama: kavramları eşleştir

BrowserRouter

Uygulama kabuğu
Routes

Rota listesi
Route

Tek yol
path="*"

404 yolu

Sıradaki ders: Layout ve router

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler