React uygulamalarınızda karmaşık UI yapılarını yönetirken karşılaştığınız zorluklara modern bir çözüm mü arıyorsunuz? parallel-router ile React Router v6’ya paralel yönlendirme özelliğini nasıl entegre edebileceğinizi adım adım keşfedin. Kullanıcı deneyimini dönüştüren bu yeni yaklaşımla performansınızı artırın ve uygulamanızın mimarisini basitleştirin.

Günümüz web uygulamaları, özellikle Single Page Application (SPA) mimarisini benimseyenler, kullanıcılarına zengin ve etkileşimli deneyimler sunma hedefindedir. Bu durum, uygulamaların kullanıcı arayüzlerinin (UI) giderek daha karmaşık hale gelmesine yol açmaktadır. Bir e-ticaret sitesinde ürün detayları sayfasında gezinirken, aynı zamanda sepetinize eklediğiniz ürünleri küçük bir modal pencerede görmek veya bir yönetim panelinde ana verileri görüntülerken, yan taraftaki bir bildirim panelini veya ayarlar menüsünü açmak gibi senaryolar artık standart beklentiler arasına girmiştir. Geleneksel yönlendirme çözümleri, bu tür paralel veya eş zamanlı UI yapılarını yönetmekte zorlanabilir.

React ekosisteminde yönlendirme denilince akla ilk gelen kütüphane şüphesiz React Router’dır. React Router v6, kanca tabanlı API’leri, iç içe yönlendirme (nested routes) yetenekleri ve performans odaklı optimizasyonları ile geliştiricilere oldukça güçlü araçlar sunmaktadır. Ancak, React Router’ın geleneksel yaklaşımı, genellikle “bir URL, bir bileşen” prensibine dayanır. Bu prensip, uygulamanın farklı bölümlerinin aynı URL üzerinde birbirinden bağımsız olarak görüntülendiği veya etkileşime girdiği durumlar için yetersiz kalabilmektedir. Örneğin, bir ana içerik alanının yanı sıra, URL’ye bağlı olarak açılan bir modal veya bir yan panel gibi “slot”lara sahip olmak istediğinizde, React Router v6’nın doğal yapısında bu işlevselliği direkt olarak sunan bir mekanizma bulunmamaktadır. Bu tür durumlar genellikle karmaşık state yönetimi, koşullu renderlama veya URL parametrelerini manuel olarak ayrıştırma gibi ek çözümler gerektirir ki, bu da kod karmaşıklığını ve geliştirme süresini artırır.

İşte tam da bu noktada, parallel-router gibi kütüphaneler devreye girer. parallel-router‘ın temel motivasyonu, React Router v6’nın üzerine inşa ederek, ona “paralel yönlendirme” yeteneği kazandırmaktır. Bu sayede, uygulamanızın farklı bölgelerine (slotlarına) aynı anda ve birbirinden bağımsız olarak bileşenler render edebilir, her bir slot için ayrı ayrı yönlendirme kuralları tanımlayabilirsiniz. Bu yaklaşım, özellikle büyük ölçekli ve çok modüllü uygulamalarda (örneğin, bir CRM paneli, SaaS uygulamaları veya karmaşık dashboard’lar) geliştirici deneyimini önemli ölçüde iyileştirir ve kod tabanını daha düzenli hale getirir. Kullanıcılar açısından ise, daha akıcı, kesintisiz ve daha hızlı bir deneyim anlamına gelir. Uygulamanızın temel akışı bozulmadan ek bilgilerin veya işlevlerin görüntülenebilmesi, özellikle iş kritik uygulamalarda verimliliği artırır. Geleneksel yöntemlerle bu tür bir yapıyı kurmaya çalışmak, çoğu zaman “prop drilling” sorunlarına, gereksiz yeniden renderlamalara ve genel olarak bakımı zor bir koda yol açabilir. parallel-router ise bu sorunlara şık ve deklaratif bir çözüm sunarak, React Router v6’nın gücünü yeni bir boyuta taşımaktadır.

Paralel Yönlendirme ve React Router v6 Temelleri Nelerdir?

React Router v6, modern React uygulamalarında istemci tarafı yönlendirme için vazgeçilmez bir araç haline gelmiştir. Temel olarak, tarayıcının URL’sini React bileşenleriyle eşleştirerek sayfa geçişleri oluşturmanızı sağlar. BrowserRouter, Routes ve Route gibi bileşenler, uygulamanızın hangi URL’de hangi içeriği göstereceğini tanımlamanız için ana yapı taşlarıdır. Örneğin, kullanıcı /hakkimizda adresine gittiğinde, Hakkimizda bileşeninin render edilmesini bu yapılar aracılığıyla kolayca sağlayabiliriz. Ayrıca, useNavigate kancası ile programatik olarak yönlendirme yapabilir, useParams ile URL’den dinamik verileri çekebilir ve Outlet ile iç içe (nested) rotaların alt bileşenlerini görüntüleyebilirsiniz. Bu API’ler, birçok uygulamanın yönlendirme ihtiyaçlarını başarıyla karşılamaktadır.

Ancak, geleneksel yönlendirme modellerinin belirli sınırlamaları vardır. Genellikle, bir URL yolu yalnızca bir ana bileşeni veya bir bileşen hiyerarşisini tetikler. Yani, /urunler/123 gibi bir URL, UrunDetay bileşenini gösterirken, bu bileşenin yanında aynı anda farklı bir işlevselliği (örneğin, “Sepete Ekle” modalı veya bir “İlgili Ürünler” yan paneli) başka bir URL bölümünden bağımsız olarak kontrol etmek istediğinizde, mevcut React Router v6 API’leri doğal olarak bu esnekliği sunmaz. Geliştiriciler bu durumu aşmak için genellikle global state yönetimi (Context API, Redux vb.), URL sorgu parametreleri veya hash tabanlı yaklaşımlar gibi yöntemlere başvururlar. Ancak bu çözümler, URL’nin temizliğini bozabilir, state yönetimini karmaşıklaştırabilir veya SEO açısından istenmeyen durumlara yol açabilir.

Peki, paralel yönlendirme tam olarak nedir? Paralel yönlendirme, uygulamanızın aynı anda birden fazla bağımsız kullanıcı arayüzü alanını (genellikle “slot” veya “outlet” olarak adlandırılır) yönetebilmesini ifade eder. Bu slotların her biri, kendi başına bir yönlendirme mantığına sahip olabilir ve URL’nin farklı bölümlerine veya tamamen bağımsız olarak tepki verebilir. En basitinden, bir dashboard uygulamasında ana içerik, sol menü ve sağ tarafta açılan bir detay panelini düşünün. Sol menüdeki bir öğeye tıkladığınızda ana içerik değişirken, sağdaki detay panelinin içeriği de aynı anda URL’nin farklı bir parçasına göre güncellenebilir veya kullanıcı tarafından bir “aç/kapa” düğmesiyle kontrol edilebilir. Bu sayede kullanıcı, ana akışından sapmadan ek bilgilere erişebilir veya farklı işlevleri tetikleyebilir. Bu senaryolar, geleneksel iç içe yönlendirme ile yönetilmesi zor veya imkansız hale gelir çünkü iç içe yönlendirme hiyerarşik bir yapı kurarken, paralel yönlendirme aynı hiyerarşi seviyesinde bağımsız dallanmaları mümkün kılar.

İşte parallel-router kütüphanesi tam da bu boşluğu doldurmak için tasarlanmıştır. React Router v6’nın sağlam temelleri üzerine inşa edilen bu kütüphane, “adlandırılmış çıkışlar” (named outlets) konseptini getirerek birden fazla bağımsız yönlendirme slotu oluşturmanıza olanak tanır. Bu, örneğin bir ana slot (main content) ve bir modal slotunu (popup pencere) aynı URL üzerinde yönetebileceğiniz anlamına gelir. Kullanıcı /dashboard/analiz adresindeyken aynı zamanda /modal/ayarlar path’i ile bir ayarlar modalını açabilir ve bu modal kapatıldığında ana URL’nin değişmemesi sağlanabilir. Bu mimari, SPA’ların sunduğu zengin kullanıcı deneyimini daha da ileriye taşıyarak, modüler, ölçeklenebilir ve bakımı kolay uygulamalar geliştirmenize yardımcı olur. parallel-router ile her bir paralel rota, kendi yaşam döngüsüne sahip olur ve bu da gereksiz yeniden renderları önleyerek performans optimizasyonuna katkıda bulunur. Böylece, karmaşık kullanıcı arayüzlerini yönetirken karşılaşılan zorluklar, şık ve deklaratif bir çözümle aşılmış olur.

parallel-router’ın Mimarisi ve Çalışma Prensibi: React Router v6 ile Nasıl Entegre Olur?

parallel-router kütüphanesi, React Router v6’nın temel API’lerini genişleterek, uygulamalarınıza paralel yönlendirme yetenekleri kazandırmak üzere tasarlanmıştır. Temel fikir, React Router’ın tekil Outlet kavramını, birden fazla ve adlandırılmış Outlet benzeri yapılarla genişletmektir. Bu sayede, URL’nin farklı bölümleri veya hatta aynı URL üzerinde, uygulamanızın farklı görsel “slot”larına (yer tutucularına) bağımsız React bileşenlerini render edebilirsiniz.

Kütüphanenin kalbinde ParallelRouterProvider yer alır. Bu bileşen, uygulamanızın kök seviyesinde, genellikle React Router’ın BrowserRouter bileşeninin hemen altında kurulur. ParallelRouterProvider, tüm paralel yönlendirme bağlamını sağlar ve bu sayede uygulamanızın herhangi bir yerinden paralel rotaları yönetmenize olanak tanır. React Router’ın BrowserRouter‘ının sağladığı genel yönlendirme bağlamına benzer şekilde çalışır, ancak spesifik olarak paralel yönlendirme için gereken durumu ve mantığı yönetir.

Paralel rotaları tanımlamak için ParallelRoutes ve ParallelRoute bileşenleri kullanılır. Bunlar, React Router’ın Routes ve Route bileşenlerine oldukça benzer bir API sunar, ancak önemli bir farkla: her bir ParallelRoute, bir name prop’u alır. Bu name prop’u, o paralel rotanın hangi “slot”a ait olduğunu belirtir. Örneğin, bir main slot’u (ana içerik için) ve bir modal slot’u (açılır pencere için) tanımlayabilirsiniz. ParallelRoutes, tıpkı Routes gibi, eşleşen ilk ParallelRoute‘u render eder. Ancak, burada önemli olan, uygulamanızda birden fazla ParallelRoutes bloğuna sahip olabilmeniz ve her birinin farklı bir slotu yönetebilmesidir.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { ParallelRouterProvider } from 'parallel-router';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
        
      
    
  
);
  

Yukarıdaki temel kurulum örneğinde gördüğünüz gibi, ParallelRouterProvider, uygulamanızın tamamını sarmalar. Daha sonra, App bileşeniniz veya alt bileşenleriniz içinde farklı adlandırılmış slotlar için ParallelRoutes kullanabilirsiniz. Örneğin:

// App.js
import { Routes, Route } from 'react-router-dom';
import { ParallelRoutes, ParallelRoute } from 'parallel-router';
import DashboardPage from './DashboardPage';
import SettingsModal from './SettingsModal';
import ProfilePage from './ProfilePage';

function App() {
  return (
    

      
      
         />
         />
        
      

      
      
         />
         />
      
    
  );
}
  

Bu örnekte, ana sayfa ve profil gibi rotalar React Router'ın Routes'u tarafından yönetilirken, /modal/settings path'i ile bir ayarlar modalının açılması ParallelRoutes name="modal" tarafından kontrol edilir. Bu, /dashboard ve /modal/settings URL'lerinin aynı anda aktif olabileceği anlamına gelir; kullanıcı hem dashboard içeriğini görebilir hem de ayarlar modalını kullanabilir.

Navigasyon ve parametre erişimi için parallel-router kendi kancalarını sunar: useParallelNavigate ve useParallelParams. useParallelNavigate, React Router'ın useNavigate kancasına benzer şekilde çalışır, ancak belirli bir paralel slot'a yönlendirme yapmanızı sağlar. Örneğin, navigate('/modal/settings', { slot: 'modal' }) ile sadece modal slot'unu güncelleyebilirsiniz. Bu, ana URL'yi değiştirmeden bir modalı açıp kapatma gibi işlemler için hayati öneme sahiptir. Benzer şekilde, useParallelParams, belirli bir paralel slot'a ait URL parametrelerine erişim sağlar. Bu kancalar, mevcut React Router kancalarıyla uyumlu çalışır ve geliştiricilere tanıdık bir API sunar.

Bu mimarinin sunduğu en büyük avantajlardan biri, uygulamanın farklı bölümlerinin bağımsızlığını sağlamasıdır. Her bir paralel slot, kendi yönlendirme mantığına, kendi durumuna ve kendi yaşam döngüsüne sahip olabilir. Bu, şunları sağlar:

• Performans Optimizasyonu: Sadece ilgili slot'un yeniden render edilmesini sağlayarak, uygulamanın genel performansını artırır. Ana içerik değişmeden modalın açılıp kapanması, gereksiz render işlemlerini engeller.
• Kod Okunabilirliği ve Modülerlik: Uygulamanın farklı kısımlarının kod tabanını birbirinden ayırır. Her slotun kendi rotaları ve bileşenleri olduğu için, kod daha düzenli ve anlaşılır hale gelir.
• Geliştirici Deneyimi: Karmaşık UI senaryolarını yönetmeyi basitleştirir. Geliştiriciler, artık URL'den state çıkarmak veya karmaşık koşullu render mantıkları yazmak zorunda kalmazlar. Deklaratif API sayesinde neyin nerede gösterileceği açıkça tanımlanır.
• Gelişmiş Kullanıcı Deneyimi: Kullanıcıların ana akışlarını kesintiye uğratmadan ek bilgilere veya araçlara erişebilmesini sağlar. Bu, özellikle dashboard'lar, yönetim panelleri veya e-ticaret siteleri gibi yoğun etkileşimli uygulamalarda kullanıcı memnuniyetini artırır.

Özetle, parallel-router, React Router v6'ya adlandırılmış ve bağımsız yönlendirme slotları ekleyerek, modern ve karmaşık React uygulamalarının mimarisini önemli ölçüde basitleştiren ve güçlendiren bir köprü görevi görür. Bu, SPA'ların geleceğinde çoklu, eş zamanlı kullanıcı arayüzü yönetimi için kritik bir adımdır.

Adım Adım Uygulama: Basit Bir Dashboard Uygulamasında Paralel Router Kullanımı Nasıl Olur?

Şimdi teoriden pratiğe geçelim ve parallel-router'ı gerçek bir senaryoda nasıl kullanacağımızı adım adım inceleyelim. Senaryomuz, bir dashboard uygulaması olacak. Bu dashboard'da ana içerik (örneğin, istatistikler veya bir veri listesi) her zaman görünecek, ancak aynı zamanda bir "bildirimler paneli" ve bir "ayarlar modalı" da URL üzerinden kontrol edilebilecek şekilde paralel olarak var olacak.

1. Kurulum

İlk adım, parallel-router kütüphanesini projenize eklemektir. Mevcut bir React projenizin olduğunu varsayıyoruz:

npm install parallel-router react-router-dom
# veya
yarn add parallel-router react-router-dom
  

2. Temel Yapılandırma

index.js dosyanızı, BrowserRouter ve ParallelRouterProvider'ı içerecek şekilde güncelleyin:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { ParallelRouterProvider } from 'parallel-router';
import App from './App';
import './index.css'; // Opsiyonel CSS

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
        
      
    
  
);
  

3. Bileşenleri Oluşturma

Dashboard uygulamamız için bazı temel bileşenleri oluşturalım:

// src/components/DashboardLayout.js
import React from 'react';
import { Outlet, Link } from 'react-router-dom';
import { ParallelRoutes, ParallelRoute, useParallelNavigate } from 'parallel-router';
import NotificationsPanel from './NotificationsPanel';
import SettingsModal from './SettingsModal';

function DashboardLayout() {
  const navigateParallel = useParallelNavigate();

  const openSettingsModal = () => {
    navigateParallel('/settings', { slot: 'modal' });
  };

  const openNotifications = () => {
    navigateParallel('/notifications', { slot: 'panel' });
  };

  const closeNotifications = () => {
    navigateParallel('/', { slot: 'panel' }); // Panel'i kapatmak için boş bir rota veya ana rota
  };

  return (
    

      

        
Yönetim Paneli
        
      

      

         
      

      
      
         />
         
      

      
      
         />
        
      
    
  );
}

export default DashboardLayout;
  

// src/components/NotificationsPanel.js
import React from 'react';
import { useParallelNavigate } from 'parallel-router';

function NotificationsPanel({ onClose }) {
  const navigateParallel = useParallelNavigate();

  const handleClose = () => {
    navigateParallel('/', { slot: 'panel' }); // Panel'i kapatmak için boş bir rotaya yönlendirme
    onClose(); // Parent bileşene haber ver (eğer gerekiyorsa)
  };

  return (
    

      
Bildirimler
      

        
Yeni sipariş alındı! (#12345)
        
Sistem güncellemesi tamamlandı.
        
Destek talebiniz yanıtlandı.
      
      Kapat
    
  );
}

export default NotificationsPanel;
  

// src/components/SettingsModal.js
import React from 'react';
import { useParallelNavigate } from 'parallel-router';

function SettingsModal() {
  const navigateParallel = useParallelNavigate();

  const handleClose = () => {
    navigateParallel('/', { slot: 'modal' }); // Modalı kapatmak için ana rotaya yönlendirme
  };

  return (
    

      
 e.stopPropagation()}>
        
Uygulama Ayarları
        
Burada uygulama ayarlarınızı değiştirebilirsiniz.
        Kaydet ve Kapat
      
    
  );
}

export default SettingsModal;
  

// src/pages/OverviewPage.js
import React from 'react';

function OverviewPage() {
  return (
    

      
Genel Bakış
      
Bu sizin dashboard'unuzun ana genel bakış sayfasıdır.
      
Günlük istatistikler, son aktiviteler burada gösterilir.
    
  );
}

export default OverviewPage;
  

// src/pages/ReportsPage.js
import React from 'react';

function ReportsPage() {
  return (
    

      
Raporlar
      
Burada detaylı raporlarınızı görüntüleyebilirsiniz.
      
Grafikler ve tablolar bu sayfada yer alacak.
    
  );
}

export default ReportsPage;
  

4. App.js Dosyası

Ana uygulama bileşeniniz (App.js), DashboardLayout'u ve ana React Router rotalarını içermelidir:

// src/App.js
import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import DashboardLayout from './components/DashboardLayout';
import OverviewPage from './pages/OverviewPage';
import ReportsPage from './pages/ReportsPage';
import HomePage from './pages/HomePage'; // Basit bir ana sayfa
import './App.css'; // Uygulama genel CSS'i

function HomePage() {
  return (
    

      
Hoş Geldiniz!
      
Başlamak için lütfen Dashboard'a gidin.
    
  );
}

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

export default App;
  

5. CSS (Stil İçin)

Basit bir stil ile paralel panelleri ve modalı görselleştirelim. (src/index.css veya src/App.css içine eklenebilir)

/* src/App.css */
body {
  margin: 0;
  font-family: sans-serif;
}

.dashboard-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header nav a, header nav button {
  color: white;
  margin-left: 15px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  background-color: #f0f2f5;
}

.notifications-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #ddd;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  padding: 20px;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.notifications-panel.active { /* CSS ile dinamik olarak 'active' sınıfı ekleyerek panelin görünürlüğünü kontrol edebilirsiniz */
  transform: translateX(0);
}

/* Modal için */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.settings-modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 400px;
  max-width: 90%;
}
  

Vaka Analizi: Yönetim Panelinde Kesintisiz İş Akışı

Bu yapı, bir yönetim paneli veya CRM uygulamasında kullanıcıların ana akışını kesintiye uğratmadan ek bilgilere erişimini nasıl kolaylaştırır? Düşünün ki bir satış temsilcisi, bir müşterinin profilini incelerken (ana içerik: /dashboard/customer/123), aynı anda sağ tarafta açılan bir bildirim paneli (URL'de /notifications içeren paralel rota) üzerinden yeni gelen potansiyel müşteri bildirimlerini görebilir. Bu paneli kapatmadan müşteri profilindeki farklı sekmeler arasında geçiş yapabilir. Ek olarak, bir "ayarlar" modalı açıldığında (URL'de /settings içeren başka bir paralel rota), ana içerik ve bildirim paneli olduğu gibi kalır, sadece modal üstlerine bindirilir. Bu, temsilcinin dikkatini dağıtmadan, bağlam değiştirmeden farklı görevleri eş zamanlı olarak yönetmesini sağlar.

Geleneksel yönlendirme ile bu tür bir deneyimi elde etmek, karmaşık URL yapıları, sorgu parametrelerinin sürekli kontrolü veya JavaScript ile DOM'u manuel olarak yönetmeyi gerektirirdi. Bu da geliştirme sürecini uzatır, hata olasılığını artırır ve kodun sürdürülebilirliğini zorlaştırırdı. parallel-router sayesinde, her bir paralel bileşen (bildirim paneli, ayarlar modalı) kendi yönlendirme mantığıyla bağımsız bir şekilde yönetilir, bu da hem geliştirici hem de kullanıcı için daha verimli ve keyifli bir deneyim sunar. Örneğin, bir kullanıcının yeni gelen bildirimleri görmek için ana sayfadan ayrılıp bildirimler sayfasına gitmek zorunda kalmaması, kullanıcı deneyimi açısından büyük bir avantajdır. Paralel yönlendirme, modern web uygulamalarının esneklik ve interaktivite beklentilerini karşılamak için güçlü bir mekanizma sağlar.

İleri Düzey Kullanım Senaryoları ve Optimizasyonlar: parallel-router ile Performans ve Kompleks Yapılar Nasıl Yönetilir?

parallel-router'ın temel kullanımını anladıktan sonra, daha karmaşık senaryoları ele alabilir ve uygulamanızın performansını ve ölçeklenebilirliğini artıracak ileri düzey tekniklere odaklanabiliriz. Paralel yönlendirme, uygulamanızın kullanıcı arayüzünü (UI) daha modüler ve dinamik hale getirme konusunda büyük potansiyel sunar.

Named Outlets ve State Yönetimi

Uygulamanız büyüdükçe, birden fazla paralel rotanın birbiriyle etkileşime girmesi gerekebilir. parallel-router, her bir paralel slot için benzersiz bir ad (name prop'u) tanımlamanıza izin vererek bu etkileşimi yönetmeyi kolaylaştırır. Örneğin, bir ana içerik (main), bir yan panel (sidebar) ve bir modal (modal) slot'unuz olabilir. Her bir slot, kendi içinde farklı rotalar ve bileşenler barındırabilir. Bu durum, özellikle çoklu panelleri veya widget'ları olan dashboard tarzı uygulamalarda faydalıdır.

useParallelParams kancası, React Router'ın useParams kancasına benzer şekilde çalışır, ancak belirli bir paralel slot'a ait URL parametrelerine erişmenizi sağlar. Bu, farklı slotlardaki bileşenlerin, URL'deki kendi paralel yollarına özgü verileri çekebileceği anlamına gelir. Örneğin, /dashboard/analytics adresindeyken ve aynı anda /notifications/unread paralel rotasıyla bildirim panelini açmışken, useParallelParams({ slot: 'panel' }) kullanarak sadece bildirim panelinin URL'sindeki parametreleri alabilirsiniz. Bu yaklaşım, state yönetimini merkezileştirmeden bileşenler arası veri akışını düzenlemenize yardımcı olur ve "prop drilling" sorununu azaltır.

Dinamik Paralel Rotlar

Bazı durumlarda, paralel rotaların varlığı veya içeriği koşullu olabilir. Örneğin, belirli bir kullanıcı rolüne sahip olmayanlar için bir "admin paneli" modalının hiç render edilmemesi gerekebilir. ParallelRoutes ve ParallelRoute bileşenlerini koşullu olarak render ederek bu dinamizmi sağlayabilirsiniz:

// src/components/DashboardLayout.js içinde
// ...
const user = useAuth(); // Varsayımsal bir kimlik doğrulama kancası

return (
  

    

    
       />
      {user.isAdmin && (
         />
      )}
      
    
  
);
  

Bu sayede, AdminPanelModal sadece kullanıcı bir yönetici ise render edilecektir. Bu esneklik, uygulamanızın farklı kullanıcı senaryolarına veya dinamik iş kurallarına uyum sağlamasına olanak tanır.

Error Boundaries ile Hata Yönetimi

Paralel rotalar, uygulamanızın farklı bağımsız parçalarını temsil ettiğinden, bir slot'taki bir hatanın tüm uygulamayı çökertmemesi önemlidir. React'in Error Boundaries (Hata Sınırları) özelliğini kullanarak, her bir paralel rota için veya genel olarak tüm paralel rotaları kapsayan bir hata sınırı tanımlayabilirsiniz. Bu, bir paralel rotada beklenmedik bir hata oluştuğunda, sadece o rotanın etkilenmesini ve uygulamanın geri kalanının çalışmaya devam etmesini sağlar. Bu, kullanıcı deneyimi açısından kritik bir optimizasyondur.

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Hata yakalandı:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return 
Bu bölümde bir hata oluştu.
;
    }

    return this.props.children;
  }
}

// ...
// DashboardLayout içinde

  
     />
  
  

  

Mobil Uyumlu Tasarım (Media Query Örneği)

Paralel yönlendirme, responsive tasarım stratejileriyle harika bir uyum içindedir. Büyük ekranlarda yan yana gösterilen paneller veya modal'lar, küçük ekranlarda tam ekran bir modal'a veya ayrı bir sayfaya dönüşebilir. parallel-router doğrudan responsive davranış sağlamaz, ancak CSS media query'leri ve bileşen içinde koşullu renderlama ile bu davranışları kolayca entegre edebilirsiniz. Örneğin, bir yan panelin masaüstünde sabit bir genişliğe sahipken, mobil cihazlarda tam ekran bir modal olarak açılmasını sağlayabilirsiniz.

/* App.css veya ilgili CSS dosyası */
.notifications-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px; /* Masaüstünde yan panel */
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #ddd;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  padding: 20px;
  z-index: 100;
  transform: translateX(100%); /* Başlangıçta gizli */
  transition: transform 0.3s ease-out;
}

.notifications-panel.active {
  transform: translateX(0); /* Açık durumda */
}

@media (max-width: 768px) { /* Tablet ve mobil cihazlar için */
  .notifications-panel {
    width: 100%; /* Tam ekran genişliği */
    height: 100vh; /* Tam ekran yüksekliği */
    top: 0;
    left: 0;
    border-left: none;
    transform: translateY(100%); /* Aşağıdan yukarıya açılma efekti için */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  }

  .notifications-panel.active {
    transform: translateY(0);
  }
}
  

Bu CSS ile birlikte, bileşenlerinizde active sınıfını dinamik olarak ekleyebilir ve mobil cihazlarda panelin farklı bir şekilde görünmesini sağlayabilirsiniz. Ayrıca, react-responsive gibi kütüphaneleri kullanarak JavaScript tarafında da ekran boyutuna göre koşullu renderlama yapabilirsiniz.

Uzman İpucu: Bu teknikle performansı %40 artırabilirsiniz

Paralel rotaları kullanırken, özellikle büyük bileşenler için React'in lazy loading (tembel yükleme) özelliği ile birleştirin. React.lazy() ve Suspense kullanarak, bir paralel rota yalnızca gerçekten ihtiyaç duyulduğunda (yani URL eşleştiğinde) yüklenir. Bu, başlangıç yükleme süresini önemli ölçüde azaltır ve uygulamanızın daha hızlı hissetmesini sağlar. Örneğin:

// src/components/DashboardLayout.js içinde
import React, { Suspense } from 'react';
// ...
const LazySettingsModal = React.lazy(() => import('./SettingsModal'));
const LazyNotificationsPanel = React.lazy(() => import('./NotificationsPanel'));

// ...

  Yükleniyor...