{"id":32518,"date":"2025-10-22T19:32:43","date_gmt":"2025-10-22T16:32:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-router-v6-ile-paralel-yonlendirme-nasil-eklenir-parallel-router-tanitimi-%f0%9f%9a%80\/"},"modified":"2025-10-22T19:32:43","modified_gmt":"2025-10-22T16:32:43","slug":"react-router-v6-ile-paralel-yonlendirme-nasil-eklenir-parallel-router-tanitimi-%f0%9f%9a%80","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-router-v6-ile-paralel-yonlendirme-nasil-eklenir-parallel-router-tanitimi-%f0%9f%9a%80\/","title":{"rendered":"React Router v6 ile Paralel Y\u00f6nlendirme Nas\u0131l Eklenir? parallel-router Tan\u0131t\u0131m\u0131 \ud83d\ude80"},"content":{"rendered":"

<\/p>\n

React uygulamalar\u0131n\u0131zda karma\u015f\u0131k UI yap\u0131lar\u0131n\u0131 y\u00f6netirken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklara modern bir \u00e7\u00f6z\u00fcm m\u00fc ar\u0131yorsunuz? parallel-router<\/code> ile React Router v6’ya paralel y\u00f6nlendirme \u00f6zelli\u011fini nas\u0131l entegre edebilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedin. Kullan\u0131c\u0131 deneyimini d\u00f6n\u00fc\u015ft\u00fcren bu yeni yakla\u015f\u0131mla performans\u0131n\u0131z\u0131 art\u0131r\u0131n ve uygulaman\u0131z\u0131n mimarisini basitle\u015ftirin.<\/p>\n

G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, \u00f6zellikle Single Page Application (SPA) mimarisini benimseyenler, kullan\u0131c\u0131lar\u0131na zengin ve etkile\u015fimli deneyimler sunma hedefindedir. Bu durum, uygulamalar\u0131n kullan\u0131c\u0131 aray\u00fczlerinin (UI) giderek daha karma\u015f\u0131k hale gelmesine yol a\u00e7maktad\u0131r. Bir e-ticaret sitesinde \u00fcr\u00fcn detaylar\u0131 sayfas\u0131nda gezinirken, ayn\u0131 zamanda sepetinize ekledi\u011finiz \u00fcr\u00fcnleri k\u00fc\u00e7\u00fck bir modal pencerede g\u00f6rmek veya bir y\u00f6netim panelinde ana verileri g\u00f6r\u00fcnt\u00fclerken, yan taraftaki bir bildirim panelini veya ayarlar men\u00fcs\u00fcn\u00fc a\u00e7mak gibi senaryolar art\u0131k standart beklentiler aras\u0131na girmi\u015ftir. Geleneksel y\u00f6nlendirme \u00e7\u00f6z\u00fcmleri, bu t\u00fcr paralel veya e\u015f zamanl\u0131 UI yap\u0131lar\u0131n\u0131 y\u00f6netmekte zorlanabilir.<\/p>\n

React ekosisteminde y\u00f6nlendirme denilince akla ilk gelen k\u00fct\u00fcphane \u015f\u00fcphesiz React Router’d\u0131r. React Router v6, kanca tabanl\u0131 API’leri, i\u00e7 i\u00e7e y\u00f6nlendirme (nested routes) yetenekleri ve performans odakl\u0131 optimizasyonlar\u0131 ile geli\u015ftiricilere olduk\u00e7a g\u00fc\u00e7l\u00fc ara\u00e7lar sunmaktad\u0131r. Ancak, React Router’\u0131n geleneksel yakla\u015f\u0131m\u0131, genellikle “bir URL, bir bile\u015fen” prensibine dayan\u0131r. Bu prensip, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin ayn\u0131 URL \u00fczerinde birbirinden ba\u011f\u0131ms\u0131z olarak g\u00f6r\u00fcnt\u00fclendi\u011fi veya etkile\u015fime girdi\u011fi durumlar i\u00e7in yetersiz kalabilmektedir. \u00d6rne\u011fin, bir ana i\u00e7erik alan\u0131n\u0131n yan\u0131 s\u0131ra, URL’ye ba\u011fl\u0131 olarak a\u00e7\u0131lan bir modal veya bir yan panel gibi “slot”lara sahip olmak istedi\u011finizde, React Router v6’n\u0131n do\u011fal yap\u0131s\u0131nda bu i\u015flevselli\u011fi direkt olarak sunan bir mekanizma bulunmamaktad\u0131r. Bu t\u00fcr durumlar genellikle karma\u015f\u0131k state y\u00f6netimi, ko\u015fullu renderlama veya URL parametrelerini manuel olarak ayr\u0131\u015ft\u0131rma gibi ek \u00e7\u00f6z\u00fcmler gerektirir ki, bu da kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 ve geli\u015ftirme s\u00fcresini art\u0131r\u0131r.<\/p>\n

\u0130\u015fte tam da bu noktada, parallel-router<\/code> gibi k\u00fct\u00fcphaneler devreye girer. parallel-router<\/code>‘\u0131n temel motivasyonu, React Router v6’n\u0131n \u00fczerine in\u015fa ederek, ona “paralel y\u00f6nlendirme” yetene\u011fi kazand\u0131rmakt\u0131r. Bu sayede, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6lgelerine (slotlar\u0131na) ayn\u0131 anda ve birbirinden ba\u011f\u0131ms\u0131z olarak bile\u015fenler render edebilir, her bir slot i\u00e7in ayr\u0131 ayr\u0131 y\u00f6nlendirme kurallar\u0131 tan\u0131mlayabilirsiniz. Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli ve \u00e7ok mod\u00fcll\u00fc uygulamalarda (\u00f6rne\u011fin, bir CRM paneli, SaaS uygulamalar\u0131 veya karma\u015f\u0131k dashboard’lar) geli\u015ftirici deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir ve kod taban\u0131n\u0131 daha d\u00fczenli hale getirir. Kullan\u0131c\u0131lar a\u00e7\u0131s\u0131ndan ise, daha ak\u0131c\u0131, kesintisiz ve daha h\u0131zl\u0131 bir deneyim anlam\u0131na gelir. Uygulaman\u0131z\u0131n temel ak\u0131\u015f\u0131 bozulmadan ek bilgilerin veya i\u015flevlerin g\u00f6r\u00fcnt\u00fclenebilmesi, \u00f6zellikle i\u015f kritik uygulamalarda verimlili\u011fi art\u0131r\u0131r. Geleneksel y\u00f6ntemlerle bu t\u00fcr bir yap\u0131y\u0131 kurmaya \u00e7al\u0131\u015fmak, \u00e7o\u011fu zaman “prop drilling” sorunlar\u0131na, gereksiz yeniden renderlamalara ve genel olarak bak\u0131m\u0131 zor bir koda yol a\u00e7abilir. parallel-router<\/code> ise bu sorunlara \u015f\u0131k ve deklaratif bir \u00e7\u00f6z\u00fcm sunarak, React Router v6’n\u0131n g\u00fcc\u00fcn\u00fc yeni bir boyuta ta\u015f\u0131maktad\u0131r.<\/p>\n

Paralel Y\u00f6nlendirme ve React Router v6 Temelleri Nelerdir?<\/h2>\n

React Router v6, modern React uygulamalar\u0131nda istemci taraf\u0131 y\u00f6nlendirme i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. Temel olarak, taray\u0131c\u0131n\u0131n URL’sini React bile\u015fenleriyle e\u015fle\u015ftirerek sayfa ge\u00e7i\u015fleri olu\u015fturman\u0131z\u0131 sa\u011flar. BrowserRouter<\/code>, Routes<\/code> ve Route<\/code> gibi bile\u015fenler, uygulaman\u0131z\u0131n hangi URL’de hangi i\u00e7eri\u011fi g\u00f6sterece\u011fini tan\u0131mlaman\u0131z i\u00e7in ana yap\u0131 ta\u015flar\u0131d\u0131r. \u00d6rne\u011fin, kullan\u0131c\u0131 \/hakkimizda<\/code> adresine gitti\u011finde, Hakkimizda<\/code> bile\u015feninin render edilmesini bu yap\u0131lar arac\u0131l\u0131\u011f\u0131yla kolayca sa\u011flayabiliriz. Ayr\u0131ca, useNavigate<\/code> kancas\u0131 ile programatik olarak y\u00f6nlendirme yapabilir, useParams<\/code> ile URL’den dinamik verileri \u00e7ekebilir ve Outlet<\/code> ile i\u00e7 i\u00e7e (nested) rotalar\u0131n alt bile\u015fenlerini g\u00f6r\u00fcnt\u00fcleyebilirsiniz. Bu API’ler, bir\u00e7ok uygulaman\u0131n y\u00f6nlendirme ihtiya\u00e7lar\u0131n\u0131 ba\u015far\u0131yla kar\u015f\u0131lamaktad\u0131r.<\/p>\n

Ancak, geleneksel y\u00f6nlendirme modellerinin belirli s\u0131n\u0131rlamalar\u0131 vard\u0131r. Genellikle, bir URL yolu yaln\u0131zca bir ana bile\u015feni veya bir bile\u015fen hiyerar\u015fisini tetikler. Yani, \/urunler\/123<\/code> gibi bir URL, UrunDetay<\/code> bile\u015fenini g\u00f6sterirken, bu bile\u015fenin yan\u0131nda ayn\u0131 anda farkl\u0131 bir i\u015flevselli\u011fi (\u00f6rne\u011fin, “Sepete Ekle” modal\u0131 veya bir “\u0130lgili \u00dcr\u00fcnler” yan paneli) ba\u015fka bir URL b\u00f6l\u00fcm\u00fcnden ba\u011f\u0131ms\u0131z olarak kontrol etmek istedi\u011finizde, mevcut React Router v6 API’leri do\u011fal olarak bu esnekli\u011fi sunmaz. Geli\u015ftiriciler bu durumu a\u015fmak i\u00e7in genellikle global state y\u00f6netimi (Context API, Redux vb.), URL sorgu parametreleri veya hash tabanl\u0131 yakla\u015f\u0131mlar gibi y\u00f6ntemlere ba\u015fvururlar. Ancak bu \u00e7\u00f6z\u00fcmler, URL’nin temizli\u011fini bozabilir, state y\u00f6netimini karma\u015f\u0131kla\u015ft\u0131rabilir veya SEO a\u00e7\u0131s\u0131ndan istenmeyen durumlara yol a\u00e7abilir.<\/p>\n

Peki, paralel y\u00f6nlendirme tam olarak nedir? Paralel y\u00f6nlendirme, uygulaman\u0131z\u0131n ayn\u0131 anda birden fazla ba\u011f\u0131ms\u0131z kullan\u0131c\u0131 aray\u00fcz\u00fc alan\u0131n\u0131 (genellikle “slot” veya “outlet” olarak adland\u0131r\u0131l\u0131r) y\u00f6netebilmesini ifade eder. Bu slotlar\u0131n her biri, kendi ba\u015f\u0131na bir y\u00f6nlendirme mant\u0131\u011f\u0131na sahip olabilir ve URL’nin farkl\u0131 b\u00f6l\u00fcmlerine veya tamamen ba\u011f\u0131ms\u0131z olarak tepki verebilir. En basitinden, bir dashboard uygulamas\u0131nda ana i\u00e7erik, sol men\u00fc ve sa\u011f tarafta a\u00e7\u0131lan bir detay panelini d\u00fc\u015f\u00fcn\u00fcn. Sol men\u00fcdeki bir \u00f6\u011feye t\u0131klad\u0131\u011f\u0131n\u0131zda ana i\u00e7erik de\u011fi\u015firken, sa\u011fdaki detay panelinin i\u00e7eri\u011fi de ayn\u0131 anda URL’nin farkl\u0131 bir par\u00e7as\u0131na g\u00f6re g\u00fcncellenebilir veya kullan\u0131c\u0131 taraf\u0131ndan bir “a\u00e7\/kapa” d\u00fc\u011fmesiyle kontrol edilebilir. Bu sayede kullan\u0131c\u0131, ana ak\u0131\u015f\u0131ndan sapmadan ek bilgilere eri\u015febilir veya farkl\u0131 i\u015flevleri tetikleyebilir. Bu senaryolar, geleneksel i\u00e7 i\u00e7e y\u00f6nlendirme ile y\u00f6netilmesi zor veya imkans\u0131z hale gelir \u00e7\u00fcnk\u00fc i\u00e7 i\u00e7e y\u00f6nlendirme hiyerar\u015fik bir yap\u0131 kurarken, paralel y\u00f6nlendirme ayn\u0131 hiyerar\u015fi seviyesinde ba\u011f\u0131ms\u0131z dallanmalar\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\n

\u0130\u015fte parallel-router<\/code> k\u00fct\u00fcphanesi tam da bu bo\u015flu\u011fu doldurmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. React Router v6’n\u0131n sa\u011flam temelleri \u00fczerine in\u015fa edilen bu k\u00fct\u00fcphane, “adland\u0131r\u0131lm\u0131\u015f \u00e7\u0131k\u0131\u015flar” (named outlets) konseptini getirerek birden fazla ba\u011f\u0131ms\u0131z y\u00f6nlendirme slotu olu\u015fturman\u0131za olanak tan\u0131r. Bu, \u00f6rne\u011fin bir ana slot (main content) ve bir modal slotunu (popup pencere) ayn\u0131 URL \u00fczerinde y\u00f6netebilece\u011finiz anlam\u0131na gelir. Kullan\u0131c\u0131 \/dashboard\/analiz<\/code> adresindeyken ayn\u0131 zamanda \/modal\/ayarlar<\/code> path’i ile bir ayarlar modal\u0131n\u0131 a\u00e7abilir ve bu modal kapat\u0131ld\u0131\u011f\u0131nda ana URL’nin de\u011fi\u015fmemesi sa\u011flanabilir. Bu mimari, SPA’lar\u0131n sundu\u011fu zengin kullan\u0131c\u0131 deneyimini daha da ileriye ta\u015f\u0131yarak, mod\u00fcler, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay uygulamalar geli\u015ftirmenize yard\u0131mc\u0131 olur. parallel-router<\/code> ile her bir paralel rota, kendi ya\u015fam d\u00f6ng\u00fcs\u00fcne sahip olur ve bu da gereksiz yeniden renderlar\u0131 \u00f6nleyerek performans optimizasyonuna katk\u0131da bulunur. B\u00f6ylece, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netirken kar\u015f\u0131la\u015f\u0131lan zorluklar, \u015f\u0131k ve deklaratif bir \u00e7\u00f6z\u00fcmle a\u015f\u0131lm\u0131\u015f olur.<\/p>\n

parallel-router’\u0131n Mimarisi ve \u00c7al\u0131\u015fma Prensibi: React Router v6 ile Nas\u0131l Entegre Olur?<\/h2>\n

parallel-router<\/code> k\u00fct\u00fcphanesi, React Router v6’n\u0131n temel API’lerini geni\u015fleterek, uygulamalar\u0131n\u0131za paralel y\u00f6nlendirme yetenekleri kazand\u0131rmak \u00fczere tasarlanm\u0131\u015ft\u0131r. Temel fikir, React Router’\u0131n tekil Outlet<\/code> kavram\u0131n\u0131, birden fazla ve adland\u0131r\u0131lm\u0131\u015f Outlet<\/code> benzeri yap\u0131larla geni\u015fletmektir. Bu sayede, URL’nin farkl\u0131 b\u00f6l\u00fcmleri veya hatta ayn\u0131 URL \u00fczerinde, uygulaman\u0131z\u0131n farkl\u0131 g\u00f6rsel “slot”lar\u0131na (yer tutucular\u0131na) ba\u011f\u0131ms\u0131z React bile\u015fenlerini render edebilirsiniz.<\/p>\n

K\u00fct\u00fcphanenin kalbinde ParallelRouterProvider<\/code> yer al\u0131r. Bu bile\u015fen, uygulaman\u0131z\u0131n k\u00f6k seviyesinde, genellikle React Router’\u0131n BrowserRouter<\/code> bile\u015feninin hemen alt\u0131nda kurulur. ParallelRouterProvider<\/code>, t\u00fcm paralel y\u00f6nlendirme ba\u011flam\u0131n\u0131 sa\u011flar ve bu sayede uygulaman\u0131z\u0131n herhangi bir yerinden paralel rotalar\u0131 y\u00f6netmenize olanak tan\u0131r. React Router’\u0131n BrowserRouter<\/code>‘\u0131n\u0131n sa\u011flad\u0131\u011f\u0131 genel y\u00f6nlendirme ba\u011flam\u0131na benzer \u015fekilde \u00e7al\u0131\u015f\u0131r, ancak spesifik olarak paralel y\u00f6nlendirme i\u00e7in gereken durumu ve mant\u0131\u011f\u0131 y\u00f6netir.<\/p>\n

Paralel rotalar\u0131 tan\u0131mlamak i\u00e7in ParallelRoutes<\/code> ve ParallelRoute<\/code> bile\u015fenleri kullan\u0131l\u0131r. Bunlar, React Router’\u0131n Routes<\/code> ve Route<\/code> bile\u015fenlerine olduk\u00e7a benzer bir API sunar, ancak \u00f6nemli bir farkla: her bir ParallelRoute<\/code>, bir name<\/code> prop’u al\u0131r. Bu name<\/code> prop’u, o paralel rotan\u0131n hangi “slot”a ait oldu\u011funu belirtir. \u00d6rne\u011fin, bir main<\/code> slot’u (ana i\u00e7erik i\u00e7in) ve bir modal<\/code> slot’u (a\u00e7\u0131l\u0131r pencere i\u00e7in) tan\u0131mlayabilirsiniz. ParallelRoutes<\/code>, t\u0131pk\u0131 Routes<\/code> gibi, e\u015fle\u015fen ilk ParallelRoute<\/code>‘u render eder. Ancak, burada \u00f6nemli olan, uygulaman\u0131zda birden fazla ParallelRoutes<\/code> blo\u011funa sahip olabilmeniz ve her birinin farkl\u0131 bir slotu y\u00f6netebilmesidir.<\/p>\n

\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport { ParallelRouterProvider } from 'parallel-router';\nimport App from '.\/App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \n    \n      \n        \n      <\/ParallelRouterProvider>\n    <\/BrowserRouter>\n  <\/React.StrictMode>\n);\n  <\/pre>\n
<\/code>\n<\/p>\n
Yukar\u0131daki temel kurulum \u00f6rne\u011finde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, ParallelRouterProvider<\/code>, uygulaman\u0131z\u0131n tamam\u0131n\u0131 sarmalar. Daha sonra, App<\/code> bile\u015feniniz veya alt bile\u015fenleriniz i\u00e7inde farkl\u0131 adland\u0131r\u0131lm\u0131\u015f slotlar i\u00e7in ParallelRoutes<\/code> kullanabilirsiniz. \u00d6rne\u011fin:<\/p>\n
\n\/\/ App.js\nimport { Routes, Route } from 'react-router-dom';\nimport { ParallelRoutes, ParallelRoute } from 'parallel-router';\nimport DashboardPage from '.\/DashboardPage';\nimport SettingsModal from '.\/SettingsModal';\nimport ProfilePage from '.\/ProfilePage';\n\nfunction App() {\n  return (\n    
\n      \n      \n         \/>\n         \/>\n        \n      <\/Routes>\n\n      \n      \n         \/>\n         \/>\n      <\/ParallelRoutes>\n    <\/div>\n  );\n}\n  <\/pre>\n
<\/code>\n<\/p>\n
Bu \u00f6rnekte, ana sayfa ve profil gibi rotalar React Router'\u0131n Routes<\/code>'u taraf\u0131ndan y\u00f6netilirken, \/modal\/settings<\/code> path'i ile bir ayarlar modal\u0131n\u0131n a\u00e7\u0131lmas\u0131 ParallelRoutes name=\"modal\"<\/code> taraf\u0131ndan kontrol edilir. Bu, \/dashboard<\/code> ve \/modal\/settings<\/code> URL'lerinin ayn\u0131 anda aktif olabilece\u011fi anlam\u0131na gelir; kullan\u0131c\u0131 hem dashboard i\u00e7eri\u011fini g\u00f6rebilir hem de ayarlar modal\u0131n\u0131 kullanabilir.<\/p>\n
Navigasyon ve parametre eri\u015fimi i\u00e7in parallel-router<\/code> kendi kancalar\u0131n\u0131 sunar: useParallelNavigate<\/code> ve useParallelParams<\/code>. useParallelNavigate<\/code>, React Router'\u0131n useNavigate<\/code> kancas\u0131na benzer \u015fekilde \u00e7al\u0131\u015f\u0131r, ancak belirli bir paralel slot'a y\u00f6nlendirme yapman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, navigate('\/modal\/settings', { slot: 'modal' })<\/code> ile sadece modal slot'unu g\u00fcncelleyebilirsiniz. Bu, ana URL'yi de\u011fi\u015ftirmeden bir modal\u0131 a\u00e7\u0131p kapatma gibi i\u015flemler i\u00e7in hayati \u00f6neme sahiptir. Benzer \u015fekilde, useParallelParams<\/code>, belirli bir paralel slot'a ait URL parametrelerine eri\u015fim sa\u011flar. Bu kancalar, mevcut React Router kancalar\u0131yla uyumlu \u00e7al\u0131\u015f\u0131r ve geli\u015ftiricilere tan\u0131d\u0131k bir API sunar.<\/p>\n
Bu mimarinin sundu\u011fu en b\u00fcy\u00fck avantajlardan biri, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131n\u0131 sa\u011flamas\u0131d\u0131r. Her bir paralel slot, kendi y\u00f6nlendirme mant\u0131\u011f\u0131na, kendi durumuna ve kendi ya\u015fam d\u00f6ng\u00fcs\u00fcne sahip olabilir. Bu, \u015funlar\u0131 sa\u011flar:<\/p>\n
    \n
  • Performans Optimizasyonu:<\/b> Sadece ilgili slot'un yeniden render edilmesini sa\u011flayarak, uygulaman\u0131n genel performans\u0131n\u0131 art\u0131r\u0131r. Ana i\u00e7erik de\u011fi\u015fmeden modal\u0131n a\u00e7\u0131l\u0131p kapanmas\u0131, gereksiz render i\u015flemlerini engeller.<\/li>\n
  • Kod Okunabilirli\u011fi ve Mod\u00fclerlik:<\/b> Uygulaman\u0131n farkl\u0131 k\u0131s\u0131mlar\u0131n\u0131n kod taban\u0131n\u0131 birbirinden ay\u0131r\u0131r. Her slotun kendi rotalar\u0131 ve bile\u015fenleri oldu\u011fu i\u00e7in, kod daha d\u00fczenli ve anla\u015f\u0131l\u0131r hale gelir.<\/li>\n
  • Geli\u015ftirici Deneyimi:<\/b> Karma\u015f\u0131k UI senaryolar\u0131n\u0131 y\u00f6netmeyi basitle\u015ftirir. Geli\u015ftiriciler, art\u0131k URL'den state \u00e7\u0131karmak veya karma\u015f\u0131k ko\u015fullu render mant\u0131klar\u0131 yazmak zorunda kalmazlar. Deklaratif API sayesinde neyin nerede g\u00f6sterilece\u011fi a\u00e7\u0131k\u00e7a tan\u0131mlan\u0131r.<\/li>\n
  • Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/b> Kullan\u0131c\u0131lar\u0131n ana ak\u0131\u015flar\u0131n\u0131 kesintiye u\u011fratmadan ek bilgilere veya ara\u00e7lara eri\u015febilmesini sa\u011flar. Bu, \u00f6zellikle dashboard'lar, y\u00f6netim panelleri veya e-ticaret siteleri gibi yo\u011fun etkile\u015fimli uygulamalarda kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r.<\/li>\n<\/ul>\n
    \u00d6zetle, parallel-router<\/code>, React Router v6'ya adland\u0131r\u0131lm\u0131\u015f ve ba\u011f\u0131ms\u0131z y\u00f6nlendirme slotlar\u0131 ekleyerek, modern ve karma\u015f\u0131k React uygulamalar\u0131n\u0131n mimarisini \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftiren ve g\u00fc\u00e7lendiren bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr. Bu, SPA'lar\u0131n gelece\u011finde \u00e7oklu, e\u015f zamanl\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc y\u00f6netimi i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n
    Ad\u0131m Ad\u0131m Uygulama: Basit Bir Dashboard Uygulamas\u0131nda Paralel Router Kullan\u0131m\u0131 Nas\u0131l Olur?<\/h2>\n
    \u015eimdi teoriden prati\u011fe ge\u00e7elim ve parallel-router<\/code>'\u0131 ger\u00e7ek bir senaryoda nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyelim. Senaryomuz, bir dashboard uygulamas\u0131 olacak. Bu dashboard'da ana i\u00e7erik (\u00f6rne\u011fin, istatistikler veya bir veri listesi) her zaman g\u00f6r\u00fcnecek, ancak ayn\u0131 zamanda bir \"bildirimler paneli\" ve bir \"ayarlar modal\u0131\" da URL \u00fczerinden kontrol edilebilecek \u015fekilde paralel olarak var olacak.<\/p>\n
    1. Kurulum<\/h3>\n
    \u0130lk ad\u0131m, parallel-router<\/code> k\u00fct\u00fcphanesini projenize eklemektir. Mevcut bir React projenizin oldu\u011funu varsay\u0131yoruz:<\/p>\n
    \nnpm install parallel-router react-router-dom\n# veya\nyarn add parallel-router react-router-dom\n  <\/pre>\n
    <\/code>\n<\/p>\n
    2. Temel Yap\u0131land\u0131rma<\/h3>\n
    index.js<\/code> dosyan\u0131z\u0131, BrowserRouter<\/code> ve ParallelRouterProvider<\/code>'\u0131 i\u00e7erecek \u015fekilde g\u00fcncelleyin:<\/p>\n
    \n\/\/ src\/index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport { ParallelRouterProvider } from 'parallel-router';\nimport App from '.\/App';\nimport '.\/index.css'; \/\/ Opsiyonel CSS\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \n    \n      \n        \n      <\/ParallelRouterProvider>\n    <\/BrowserRouter>\n  <\/React.StrictMode>\n);\n  <\/pre>\n
    <\/code>\n<\/p>\n
    3. Bile\u015fenleri Olu\u015fturma<\/h3>\n
    Dashboard uygulamam\u0131z i\u00e7in baz\u0131 temel bile\u015fenleri olu\u015ftural\u0131m:<\/p>\n
    \n\/\/ src\/components\/DashboardLayout.js\nimport React from 'react';\nimport { Outlet, Link } from 'react-router-dom';\nimport { ParallelRoutes, ParallelRoute, useParallelNavigate } from 'parallel-router';\nimport NotificationsPanel from '.\/NotificationsPanel';\nimport SettingsModal from '.\/SettingsModal';\n\nfunction DashboardLayout() {\n  const navigateParallel = useParallelNavigate();\n\n  const openSettingsModal = () => {\n    navigateParallel('\/settings', { slot: 'modal' });\n  };\n\n  const openNotifications = () => {\n    navigateParallel('\/notifications', { slot: 'panel' });\n  };\n\n  const closeNotifications = () => {\n    navigateParallel('\/', { slot: 'panel' }); \/\/ Panel'i kapatmak i\u00e7in bo\u015f bir rota veya ana rota\n  };\n\n  return (\n    
    \n      
    \n        
    Y\u00f6netim Paneli<\/h1>\n