Blog

React ile Routing: Router Uygulaması

react ile routing

Merhabalar. Yeni bir konuyla “React ile Routing” yani React’da yönlendirme konusuyla sizlerleyiz.

Önceki yazılarda, React’te bileşenleri, state yönetimini ve sayaç uygulaması örneği üzerinden state’in nasıl kullanılacağını incelemiştik. Bu yazıda ise React’te routing’i ve router uygulaması örneği üzerinden routing’in nasıl kullanılacağını inceleyeceğiz.

Routing Nedir?

Routing, kullanıcıların web uygulamanızdaki farklı sayfalar arasında geçiş yapmasını sağlayan bir mekanizmadır.

Router Uygulaması:

Bu yazıda, farklı sayfalara yönlendirme yapabilen bir router uygulaması oluşturacağız.

Adım 1: React Router Kurulumu:

  1. Terminalde yarn add react-router-dom komutunu çalıştırarak React Router kütüphanesini kurun.

Adım 2: Route Oluşturma:

App.js dosyasına aşağıdaki kodları ekleyerek farklı sayfalar için route’lar oluşturun:

JavaScript

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

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

Kodu dikkatli kullanın.content_copy

Adım 3: Sayfa Oluşturma:

Home.js ve About.js dosyalarını oluşturarak ana sayfa ve hakkında sayfası içeriğini yazın.

Adım 4: Link Kullanımı:

App.js veya Home.js dosyasına aşağıdaki kodları ekleyerek sayfalar arasında link oluşturun:

JavaScript

<Link to="/about">Hakkında</Link>

Kodu dikkatli kullanın.content_copy

Uygulamayı Çalıştırma:

  1. Terminalde yarn start komutunu çalıştırın.
  2. Tarayıcınızda http://localhost:3000 adresini açın.
  3. “Ana Sayfa” metnini göreceksiniz.
  4. “Hakkında” linkine tıklayarak hakkında sayfasına gidebilirsiniz.

Routing Kavramları:

  • Route: Bir URL’yi bir bileşene eşler.
  • Router: Route’ları yönetmek için kullanılır.
  • Link: Kullanıcıları farklı sayfalara yönlendirmek için kullanılır.

Routing Avantajları:

  • Kullanıcı deneyimini iyileştirir.
  • Uygulamanızı daha modüler hale getirir.
  • Bakım ve güncellemeyi kolaylaştırır.

Sonuç:

Bu yazıda, React’te routing’i ve router uygulaması örneği üzerinden routing’in nasıl kullanılacağını inceledik. Routing’in temel prensiplerini ve React’te routing kullanmanın avantajlarını öğrendik.

Serinin Devamı:

React ile routing konusunu bitirmiş olduk.

Ek Kaynaklar:

Bu blog yazı serisinde, React’ın temel özelliklerini ve kullanımını detaylı bir şekilde inceleyeceğiz. Takipte kalın!

Not: Bu yazı sadece basit bir örnektir. Gerçek bir blog uygulaması için daha fazla özellik ve işlev eklemeniz gerekir.

Takipte kalarak React ile uygulama geliştirmenin keyfini çıkarabilirsiniz!

Bir yanıt yazın