React uygulamalar\u0131n\u0131zda sayfa ge\u00e7i\u015fleri, dinamik rotalar ve karma\u015f\u0131k y\u00f6nlendirme senaryolar\u0131 sizi zorluyor mu? Tek sayfa uygulamalar\u0131n (SPA) vazge\u00e7ilmezi olan y\u00f6nlendirme s\u00fcre\u00e7lerini modern, temiz ve performansl\u0131 bir \u015fekilde y\u00f6netmek isteyenler i\u00e7in React Router v6, pek \u00e7ok yenilik ve basitle\u015ftirme sunuyor. Bu kapsaml\u0131 rehber, React Router v5’ten v6’ya ge\u00e7i\u015fin t\u00fcm \u00f6nemli detaylar\u0131n\u0131, yeni API’leri ve pratik kod \u00f6rneklerini ad\u0131m ad\u0131m a\u00e7\u0131klayarak uygulaman\u0131z\u0131n y\u00f6nlendirme yap\u0131s\u0131n\u0131 gelece\u011fe ta\u015f\u0131man\u0131z\u0131 sa\u011flayacak.<\/p>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve sayfa yenilemeleri olmadan h\u0131zl\u0131 ge\u00e7i\u015fler sa\u011flamak amac\u0131yla tek sayfa uygulama (SPA) mimarisini benimsemektedir. Bu mimaride, farkl\u0131 i\u00e7erikleri veya g\u00f6r\u00fcn\u00fcmleri g\u00f6stermek i\u00e7in taray\u0131c\u0131n\u0131n URL’sini de\u011fi\u015ftirmek, ancak sunucudan tam bir sayfa y\u00fcklemesi yapmamak esast\u0131r. \u0130\u015fte bu noktada, React Router gibi bir y\u00f6nlendirme k\u00fct\u00fcphanesi devreye girer. React Router, URL’ye dayal\u0131 olarak React bile\u015fenlerini ko\u015fullu olarak olu\u015fturman\u0131za olanak tan\u0131yarak karma\u015f\u0131k navigasyon yap\u0131lar\u0131n\u0131 basit ve y\u00f6netilebilir hale getirir. Ancak teknolojiler evrildik\u00e7e, eski yakla\u015f\u0131mlar yerini daha verimli ve optimize edilmi\u015f \u00e7\u00f6z\u00fcmlere b\u0131rak\u0131r. React Router da bu de\u011fi\u015fimin bir par\u00e7as\u0131 olarak v5’ten v6’ya \u00f6nemli bir revizyon ge\u00e7irdi.<\/p>\n
v5 s\u00fcr\u00fcm\u00fc zaten olduk\u00e7a pop\u00fcler ve g\u00fc\u00e7l\u00fc bir ara\u00e7 olmas\u0131na ra\u011fmen, v6 daha az kod yazmay\u0131, daha iyi performans elde etmeyi ve \u00f6zellikle i\u00e7 i\u00e7e y\u00f6nlendirmelerde (nested routing) daha sezgisel bir deneyim sunmay\u0131 hedefliyor. Bu yeni s\u00fcr\u00fcm, geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 yayg\u0131n sorunlara modern \u00e7\u00f6z\u00fcmler getirerek hem yeni projeler i\u00e7in m\u00fckemmel bir ba\u015flang\u0131\u00e7 noktas\u0131 oluyor hem de mevcut v5 tabanl\u0131 uygulamalar\u0131 g\u00fcncellemeyi d\u00fc\u015f\u00fcnenlere yol g\u00f6steriyor. \u00d6rne\u011fin, v5’teki React Router v6’n\u0131n derinliklerine dalmadan \u00f6nce, y\u00f6nlendirme (routing) kavram\u0131n\u0131n temellerini ve React ekosistemindeki yerini anlamak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Y\u00f6nlendirme, bir web uygulamas\u0131n\u0131n farkl\u0131 URL’lere veya yollara (paths) g\u00f6re farkl\u0131 i\u00e7erikler veya bile\u015fenler g\u00f6stermesini sa\u011flayan mekanizmad\u0131r. Geleneksel olarak, bir kullan\u0131c\u0131 farkl\u0131 bir sayfaya gitti\u011finde taray\u0131c\u0131, sunucudan tamamen yeni bir HTML sayfas\u0131 isterdi. Ancak SPA’larda (Single Page Applications), bu durum farkl\u0131d\u0131r. Taray\u0131c\u0131da sadece bir kez HTML sayfas\u0131 y\u00fcklenir ve sonras\u0131nda sayfa i\u00e7i navigasyonlar JavaScript ile y\u00f6netilir, bu da “client-side routing” olarak adland\u0131r\u0131l\u0131r.<\/p>\n React Router, bu client-side routing’i React bile\u015fenleri arac\u0131l\u0131\u011f\u0131yla kolayca ger\u00e7ekle\u015ftirmenizi sa\u011flayan pop\u00fcler bir k\u00fct\u00fcphanedir. Temel olarak, belirli bir URL deseniyle e\u015fle\u015fen bir bile\u015fenin render edilmesini sa\u011flar. React Router’\u0131n kalbinde yatan birka\u00e7 temel bile\u015fen ve hook bulunmaktad\u0131r:<\/p>\n React Router v6, t\u00fcm bu temel bile\u015fenleri ve yeni nesil hook’lar\u0131 (\u00f6rne\u011fin React Router v6, selefi v5’e g\u00f6re pek \u00e7ok a\u00e7\u0131dan basitle\u015ftirme ve modernizasyon getirmi\u015ftir. Bu de\u011fi\u015fiklikler, daha temiz kod, daha sezgisel API’ler ve geli\u015fmi\u015f performans sunmay\u0131 hedefler. V5’ten v6’ya ge\u00e7i\u015f yapmay\u0131 d\u00fc\u015f\u00fcnen veya direkt v6 ile ba\u015flayacak geli\u015ftiriciler i\u00e7in bu temel farkl\u0131l\u0131klar\u0131 anlamak kritik \u00f6neme sahiptir.<\/p>\n React Router v5’te, rotalar\u0131n tan\u0131mlanmas\u0131 ve e\u015fle\u015ftirilmesi i\u00e7in React Router v6’da ise V5 \u00d6rne\u011fi:<\/strong><\/p>\n <\/code><\/p>\n V6 \u00d6rne\u011fi:<\/strong><\/p>\n <\/code><\/p>\nSwitch<\/code> bile\u015feninin yerini alan Routes<\/code> bile\u015feni, rotalar\u0131n e\u015fle\u015fme mant\u0131\u011f\u0131n\u0131 k\u00f6kten de\u011fi\u015ftirirken, useHistory<\/code> hook’u yerine gelen useNavigate<\/code> ise programatik y\u00f6nlendirmeyi daha esnek hale getiriyor. Bu rehber boyunca, v5 ve v6 aras\u0131ndaki temel farkl\u0131l\u0131klar\u0131 ayr\u0131nt\u0131l\u0131 kod \u00f6rnekleriyle inceleyecek, v6’n\u0131n sundu\u011fu yenilikleri derinlemesine ke\u015ffedecek ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l uygulanabilece\u011fini g\u00f6sterece\u011fiz. Amac\u0131m\u0131z, React Router v6’ya s\u0131f\u0131rdan ba\u015flayanlar i\u00e7in eksiksiz bir kaynak sunmak ve deneyimli geli\u015ftiricilerin de bilgi birikimlerini g\u00fcncellemelerine yard\u0131mc\u0131 olmakt\u0131r. Hadi gelin, React Router v6’n\u0131n b\u00fcy\u00fcl\u00fc d\u00fcnyas\u0131na dalal\u0131m ve uygulamalar\u0131m\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!<\/p>\nReact Router’a Yeni Ba\u015flayanlar \u0130\u00e7in Temel Kavramlar Nelerdir?<\/h2>\n
\n
BrowserRouter<\/code>:<\/strong> Uygulaman\u0131z\u0131n tamam\u0131n\u0131 sarmalayan ana y\u00f6nlendirme bile\u015fenidir. HTML5 History API’sini kullanarak UI’n\u0131z\u0131 URL ile senkronize eder. Bu bile\u015fen, uygulaman\u0131zda y\u00f6nlendirmenin ger\u00e7ekle\u015fti\u011fi ba\u011flam\u0131 (context) sa\u011flar. Genellikle App.js<\/code> dosyas\u0131nda, uygulaman\u0131z\u0131n en \u00fcst d\u00fczeyinde yer al\u0131r.\n <\/li>\nRoutes<\/code>:<\/strong> React Router v6’n\u0131n en \u00f6nemli yeniliklerinden biridir ve v5’teki Switch<\/code> bile\u015feninin yerini alm\u0131\u015ft\u0131r. Routes<\/code> bile\u015feni, i\u00e7erisindeki Route<\/code> tan\u0131mlamalar\u0131n\u0131 tarar ve URL ile e\u015fle\u015fen ilk Route<\/code>‘u render eder. Switch<\/code>‘e k\u0131yasla daha g\u00fc\u00e7l\u00fc ve sezgisel bir e\u015fle\u015fme algoritmas\u0131 sunar, \u00f6zellikle i\u00e7 i\u00e7e y\u00f6nlendirmelerde kendini g\u00f6sterir.\n <\/li>\nRoute<\/code>:<\/strong> Belirli bir URL yolu ile e\u015fle\u015fti\u011finde hangi bile\u015fenin g\u00f6sterilece\u011fini tan\u0131mlar. path<\/code> prop’u ile URL deseni, element<\/code> prop’u ile de render edilecek React bile\u015feni belirtilir.\n <\/li>\nLink<\/code>:<\/strong> Uygulama i\u00e7i navigasyonu sa\u011flamak i\u00e7in kullan\u0131lan bir bile\u015fendir. Bir HTML <\/code> etiketi gibi g\u00f6r\u00fcn\u00fcr ancak sayfa yenilemesi yapmadan, yaln\u0131zca taray\u0131c\u0131 ge\u00e7mi\u015fini g\u00fcncelleyerek farkl\u0131 bir rotaya ge\u00e7i\u015fi m\u00fcmk\u00fcn k\u0131lar. to<\/code> prop’u ile hedeflenen yol belirtilir.\n <\/li>\nNavLink<\/code>:<\/strong> Link<\/code> bile\u015fenine benzer, ancak ekstra \u00f6zellikler sunar. \u00d6zellikle aktif olan rotay\u0131 belirtmek i\u00e7in otomatik olarak bir active<\/code> CSS s\u0131n\u0131f\u0131 ekleyebilir, bu da navigasyon men\u00fclerinde aktif \u00f6\u011feyi vurgulamak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.\n <\/li>\n<\/ul>\nuseNavigate<\/code>, useParams<\/code>, useLocation<\/code>) bir araya getirerek, karma\u015f\u0131k y\u00f6nlendirme gereksinimlerini bile \u015fa\u015f\u0131rt\u0131c\u0131 derecede basit ve anla\u015f\u0131l\u0131r bir \u015fekilde ele alman\u0131z\u0131 sa\u011flar. \u015eimdi, bu temel yap\u0131 ta\u015flar\u0131n\u0131 zihnimize yerle\u015ftirdikten sonra, v5 ve v6 aras\u0131ndaki d\u00f6n\u00fc\u015f\u00fcm\u00fcn ve yeniliklerin derinliklerine inmeye haz\u0131r\u0131z.<\/p>\nReact Router v5 ve v6 Aras\u0131ndaki Temel Farklar Nelerdir?<\/h2>\n
1.
Switch<\/code> Yerine Routes<\/code> Bile\u015feni<\/h3>\nSwitch<\/code>, i\u00e7erisindeki exact<\/code> prop’unu yanl\u0131\u015f kullan\u0131rken beklenmedik davran\u0131\u015flara yol a\u00e7abilirdi.
\n exact<\/code> prop’u, yolun tam olarak e\u015fle\u015fmesini sa\u011flamak i\u00e7in gerekliydi.<\/p>\nRoutes<\/code>, rotalar\u0131n e\u015fle\u015fme algoritmas\u0131n\u0131 k\u00f6kten de\u011fi\u015ftirerek exact<\/code> prop’una olan ihtiyac\u0131 ortadan kald\u0131rm\u0131\u015ft\u0131r. Art\u0131k Routes<\/code> i\u00e7erisindeki Route<\/code>‘lar, en spesifik olandan en genel olana do\u011fru bir e\u015fle\u015fme arar ve bu do\u011fal olarak en uygun rotay\u0131 se\u00e7er. Ayr\u0131ca, Routes<\/code> i\u00e7inde i\u00e7 i\u00e7e (nested) rotalar\u0131n daha kolay tan\u0131mlanmas\u0131na imkan tan\u0131r. Bu sayede, kodunuz daha okunabilir ve y\u00f6netilebilir hale gelir.<\/p>\n\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\n\nfunction AppV5() {\n return (\n \nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nfunction AppV6() {\n return (\n