React Tutorial 2023 70 – Router 2 – React-Router-Dom Kütüphanesi Kurulumu ve Detaylar

Merhabalar.

Bu yazımda Route işlemlerimizi yaparken kullanacağımız kütüphaneden sizlere bahsetmeye çalışacağım.

Aynı zamanda Router konusunu işlerken geliştireceğimiz uygulamayı oluşturacak ve react-router-dom kurulumunu yapıp bir sonraki eğitim yazımıza geçeceğiz.

Proje klasörüme reacte-router ismini verdim ve React kurulumumu gerçekleştirdim.

İlk olarak terminalde aşağıdaki komutu çalıştıralım ve kütüphanemizi projemize dahil edelim.

npm i react-router-dom

Şimdi kısaca bu kütüphanemiz ne yapar ne işe yarar bunlara bakalım. Aşağıda kod parçaları paylaşacağım şimdilik kodlara takılmayınız.

React-Router-Dom Nedir?

React uygulamalarında sayfa yönlendirmeleri ve gezinme işlemlerini kolaylaştırmak için kullanılan önemli bir kütüphane olan react-router-dom, web uygulamalarının kullanıcı deneyimini zenginleştirmek ve SPA (Tek Sayfa Uygulaması) mimarisini daha etkili bir şekilde kullanmak için tasarlanmıştır.

Bu kütüphane, React tabanlı projelerde farklı sayfalar arasında geçiş yapmayı, URL’yi takip etmeyi ve uygulama durumunu güncellemeyi sağlayan bir dizi araç ve bileşen içerir.

Temel Kavramlar

react-router-dom kütüphanesi, temel olarak üç ana bileşeni içerir: BrowserRouter, Route, ve Link.

BrowserRouter: Uygulamanın genelindeki sayfa yönlendirmelerini sağlayan bir bileşendir. Bu bileşen, tarayıcıdaki URL’yi takip eder ve uygun Route bileşenini render eder.

Route: Belirli bir URL yoluna eşleşen bir bileşeni render eder. Bu, kullanıcı belirli bir URL’yi ziyaret ettiğinde hangi bileşenin görüntüleneceğini belirlemek için kullanılır.

Link: Sayfa içindeki bağlantıları temsil eden bir bileşendir. Kullanıcılar bu bağlantılara tıkladığında, belirli bir URL’ye geçiş yaparlar.

BrowserRouter Kullanımı

İlk olarak, BrowserRouter bileşenini projenize eklemelisiniz. Bu, tarayıcıdaki URL’yi dinler ve uygun Route‘ları render etmek için kullanılır. Genellikle uygulamanızın ana bileşeni içinde kullanılır.

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* Uygulama içeriği buraya gelecek */}
    </Router>
  );
}

Route Bileşeni ve Yol Eşleştirmesi

Route bileşeni, belirli bir URL yolu ile eşleşen bir bileşeni render etmek için kullanılır. Yol eşleştirmesi için path özelliği kullanılır.

import { Route } from 'react-router-dom';

function Home() {
  return <h2>Ana Sayfa</h2>;
}

function About() {
  return <h2>Hakkında</h2>;
}

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

Yukarıdaki örnekte, ana sayfa için / ve hakkında sayfası için /about URL yolları tanımlanmıştır.

Link Bileşeni

Sayfalar arasında geçiş yapmak için Link bileşeni kullanılır. Bu bileşen, kullanıcının tıkladığı bağlantıya göre URL’yi değiştirir.

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Ana Sayfa</Link>
        </li>
        <li>
          <Link to="/about">Hakkında</Link>
        </li>
      </ul>
    </nav>
  );
}

Yukarıdaki örnekte, Link bileşeni, kullanıcının “Ana Sayfa” veya “Hakkında” bağlantılarına tıklaması durumunda ilgili sayfaya yönlendirmeyi sağlar.

Geçiş Parametreleri

react-router-dom ayrıca URL’de geçiş parametreleri kullanma yeteneği de sağlar. Bu, dinamik içerik oluşturmak için kullanışlıdır.

function UserProfile({ match }) {
  return <h2>Kullanıcı Profili: {match.params.username}</h2>;
}

function App() {
  return (
    <Router>
      <Route path="/profile/:username" component={UserProfile} />
    </Router>
  );
}

Yukarıdaki örnekte, /profile/:username URL yolu, kullanıcının adını içeren dinamik bir parametreye izin verir.

Programatik Yönlendirmeler

react-router-dom ayrıca programatik olarak sayfa yönlendirmeleri yapma olanağı da sağlar. Bu genellikle bir fonksiyon içinde useHistory veya useNavigate gibi kancalar kullanılarak gerçekleştirilir.

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  function redirectToAboutPage() {
    history.push('/about');
  }

  return (
    <div>
      <p>Component içeriği</p>
      <button onClick={redirectToAboutPage}>Hakkında Sayfasına Git</button>
    </div>
  );
}

Yukarıdaki örnekte, useHistory kancası kullanılarak bir butona tıklama durumunda programatik olarak '/about' sayfasına yönlendirme yapılmaktadır.

react-router-dom kütüphanesi, React tabanlı uygulamalarda gezinme, sayfa yönlendirmeleri ve URL yönetimi konularında büyük bir kolaylık sağlar. Bu kütüphane, SPA mimarisini daha etkili bir şekilde kullanmanıza olanak tanırken, aynı zamanda kullanıcı dostu ve dinamik web uygulamaları geliştirmenize olanak sağlayan güçlü bir araç setine sahiptir.

Bir sonraki yazımda görüşmek üzere.