React Router v4 ile Koşullu ve Duyarlı Yönlendirme Nasıl Kurulur?

# React Router v4 ile Koşullu ve Duyarlı Yönlendirme Nasıl Kurulur?

Karmaşık web uygulamalarında kullanıcı deneyimini optimize etmek için akıllı yönlendirme stratejileri hayati önem taşır. Kullanıcının rolüne, oturum durumuna veya diğer faktörlere bağlı olarak farklı sayfalara yönlendirme, uygulamanızın performansını ve kullanıcı memnuniyetini artırır. Bu makalede, React Router v4 kullanarak koşullu ve duyarlı yönlendirme mekanizmaları nasıl kurulur, adım adım açıklayacağız. Farklı karmaşıklık seviyelerindeki örneklerle, performans optimizasyon tekniklerini ve olası sorunları ele alacağız.

Öğrenme Yol Haritası

Bu makale, React Router v4 ile koşullu ve duyarlı yönlendirmeyi öğrenmek için üç aşamalı bir yol haritası sunar:

Yeni Başlayan: Temel kavramlar, basit örnekler ve adım adım uygulama.

Orta: Gerçek dünya senaryoları, daha karmaşık örnekler ve optimizasyon ipuçları.

İleri Düzey: Performans analizi, edge case’ler ve gelişmiş teknikler.

1. Temel Kavramlar: React Router v4’e Giriş

React Router, React uygulamalarında istemci tarafı yönlendirme sağlayan bir kütüphanedir. v4 sürümü, daha temiz ve esnek bir API sunar. Temel bileşenleri BrowserRouter, Switch, Route, ve Link‘tir. BrowserRouter, uygulamanızın tarayıcı tarihçesini kullanmasını sağlar. Switch, birden fazla rota tanımladığınızda sadece birinin eşleşmesini garanti eder. Route, belirli bir yola karşılık gelen bileşeni render eder. Link, kullanıcıları farklı rotalara yönlendiren bağlantılar oluşturur.

Örneğin, basit bir uygulamada:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h1>Anasayfa</h1>;
const About = () => <h1>Hakkımızda</h1>;

const App = () => (
  <Router>
    <div>
      <nav>
        <Link to="/">Anasayfa</Link> | <Link to="/about">Hakkımızda</Link>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

export default App;

Bu örnekte, / yoluna Home bileşeni, /about yoluna ise About bileşeni render edilir. exact prop’u, /about yoluna ek bir rota eklendiğinde yalnızca / yoluna tam eşleşmeyi sağlar. Daha detaylı bilgi için [Fatih Soysal’ın React Router rehberine](https://fatihsoysal.com/react-router-rehberi) bakabilirsiniz.

2. Koşullu Yönlendirme Nasıl Yapılır?

Koşullu yönlendirme, kullanıcı oturum açma durumu, rolü veya diğer koşullara bağlı olarak farklı rotalara yönlendirme yapmayı sağlar. Bunun için Redirect bileşenini ve koşullu mantık kullanırız.

Örnek Senaryo: Oturum açmamış bir kullanıcının /profile yoluna erişmeye çalışmasını engellemek ve onu /login yoluna yönlendirmek.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const Profile = () => (
  <div>
    <h1>Profil Sayfası</h1>
    <p>Hoş geldiniz!</p>
  </div>
);

const Login = () => (
  <div>
    <h1>Giriş Yap</h1>
    <button>Giriş</button>
  </div>
);

const App = () => {
  const isLoggedIn = false; // Oturum durumu

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={() => <h1>Anasayfa</h1>} />
        <Route path="/login" component={Login} />
        <Route path="/profile">
          {isLoggedIn ? <Profile /> : <Redirect to="/login" />}
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

Bu örnekte, isLoggedIn değişkeni oturum durumunu temsil eder. Eğer false ise, /profile yoluna erişim denendiğinde kullanıcı /login yoluna yönlendirilir.

3. Duyarlı Yönlendirme Nasıl Yapılır?

Duyarlı yönlendirme, URL’deki parametrelere veya dinamik kısımlara bağlı olarak farklı içerikler göstermeyi sağlar. Bunun için :paramName sözdizimi kullanılır.

Örnek Senaryo: Bir ürün detay sayfasını gösteren bir uygulama.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const ProductDetails = ({ match }) => (
  <div>
    <h1>Ürün Detayı: {match.params.productId}</h1>
    {/* Ürün detaylarını burada gösterin */}
  </div>
);

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={() => <h1>Ürünler</h1>} />
      <Route path="/product/:productId" component={ProductDetails} />
    </Switch>
  </Router>
);

export default App;

Bu örnekte, /product/123 yoluna erişildiğinde, ProductDetails bileşeni match.params.productId değişkeni ile 123 değerini alır ve ürün detayını gösterir.

4. Gerçek Dünya Senaryoları ve Vaka Analizi

Senaryo 1: Çoklu Rol Desteği: Bir e-ticaret uygulamasında, müşteri, yönetici ve moderatör rolleri olabilir. Her role göre farklı sayfalara erişim izni vermeliyiz. Bunun için, yetkilendirme mantığını Route bileşeninin render prop’u içinde uygulayabiliriz.

Senaryo 2: Oturum Süresi Kontrolü: Kullanıcının oturum süresi dolduğunda giriş sayfasına yönlendirme. Bunun için, oturum süresini takip eden bir servis ve Redirect bileşeni kullanabiliriz.

Senaryo 3: 404 Sayfası: Geçersiz bir URL’ye erişildiğinde 404 hatası gösteren bir sayfa oluşturmak. Bunun için, Switch bileşeninin sonuna bir Route ekleyip component prop’una 404 hatası sayfasını atayabiliriz.

5. Performans Optimizasyonu

React Router’ın performansını optimize etmek için aşağıdaki teknikleri kullanabilirsiniz:

* lazy ve Suspense: Büyük bileşenleri dinamik olarak yüklemek için React.lazy ve Suspense kullanın. Bu, ilk yüklenme süresini kısaltır.
* Switch Bileşeni: Sadece bir rotayı eşleştirecek şekilde Switch bileşenini kullanın. Gereksiz eşleştirmeleri önler.
* Kod Bölümleme: Uygulamanızı daha küçük parçalara bölün ve bunları gerektiğinde yükleyin. Webpack veya diğer paket yöneticilerinin kod bölümleme özelliklerini kullanın.

6. İleri Düzey Konular: Edge Case’ler ve Gelişmiş Teknikler

* Nested Routes: İç içe geçmiş rotalar oluşturmak, karmaşık uygulamalar için gereklidir.
* Programatik Yönlendirme: useHistory hook’u kullanarak JavaScript kodundan yönlendirme yapmak.
* URL Parametreleri: Query parametreleri (?param=value) kullanarak rotalara ek veri geçirmek.

7. React Router v4 ile İlgili Sıkça Sorulan Sorular

1. React Router v5 ile arasındaki farklar nelerdir? v5, bazı API değişiklikleri ve performans iyileştirmeleri içerir. Ancak, temel konseptler benzerdir.

2. Koşullu yönlendirmeyi nasıl daha temiz bir şekilde yapabilirim? Yetkilendirme ve yetkilendirme mantığını ayrı bir bileşene taşıyarak kodunuzu daha okunabilir ve bakımı kolay hale getirebilirsiniz.

3. Duyarlı rotalarda parametreleri nasıl doğrulayabilirim? Parametreleri doğrulamak için, match.params içindeki değerleri kontrol eden bir fonksiyon yazabilirsiniz.

4. Performans sorunları nasıl giderilir? React.lazy ve Suspense kullanımı, kod bölümleme ve gereksiz eşleşmeleri önleme gibi optimizasyon tekniklerini uygulayın.

5. React Router’da hata yönetimi nasıl yapılır? try...catch blokları kullanarak hata durumlarını yakalayabilir ve kullanıcıya uygun mesajlar gösterebilirsiniz.

Sonuç

Bu makalede, React Router v4 ile koşullu ve duyarlı yönlendirme kurulumunu adım adım inceledik. Başlangıç seviyesinden ileri seviyeye kadar farklı örnekler ve gerçek dünya senaryoları ile konuyu detaylı olarak ele aldık. Performans optimizasyonu ve olası sorunlar hakkında bilgi vererek, daha güçlü ve verimli React uygulamaları geliştirmenize yardımcı olmayı amaçladık. Unutmayın ki, uygulamanızın karmaşıklığına bağlı olarak, daha gelişmiş teknikler kullanmanız gerekebilir. Bu makale, bu yolculukta size temel bir rehber niteliğindedir. Daha fazla bilgi için [Fatih Soysal’ın web sitesini](https://fatihsoysal.com) ziyaret edebilirsiniz.

Yazar: Fatih Soysal