# React Router v4 ile Ko\u015fullu ve Duyarl\u0131 Y\u00f6nlendirme Nas\u0131l Kurulur?<\/p>\n
Karma\u015f\u0131k web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek i\u00e7in ak\u0131ll\u0131 y\u00f6nlendirme stratejileri hayati \u00f6nem ta\u015f\u0131r. Kullan\u0131c\u0131n\u0131n rol\u00fcne, oturum durumuna veya di\u011fer fakt\u00f6rlere ba\u011fl\u0131 olarak farkl\u0131 sayfalara y\u00f6nlendirme, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r. Bu makalede, React Router v4 kullanarak ko\u015fullu ve duyarl\u0131 y\u00f6nlendirme mekanizmalar\u0131 nas\u0131l kurulur, ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z. Farkl\u0131 karma\u015f\u0131kl\u0131k seviyelerindeki \u00f6rneklerle, performans optimizasyon tekniklerini ve olas\u0131 sorunlar\u0131 ele alaca\u011f\u0131z.<\/p>\n
\u00d6\u011frenme Yol Haritas\u0131<\/strong><\/p>\n Bu makale, React Router v4 ile ko\u015fullu ve duyarl\u0131 y\u00f6nlendirmeyi \u00f6\u011frenmek i\u00e7in \u00fc\u00e7 a\u015famal\u0131 bir yol haritas\u0131 sunar:<\/p>\n Yeni Ba\u015flayan:<\/strong> Temel kavramlar, basit \u00f6rnekler ve ad\u0131m ad\u0131m uygulama.<\/p>\n Orta:<\/strong> Ger\u00e7ek d\u00fcnya senaryolar\u0131, daha karma\u015f\u0131k \u00f6rnekler ve optimizasyon ipu\u00e7lar\u0131.<\/p>\n \u0130leri D\u00fczey:<\/strong> Performans analizi, edge case’ler ve geli\u015fmi\u015f teknikler.<\/p>\n 1. Temel Kavramlar: React Router v4’e Giri\u015f<\/strong><\/p>\n React Router, React uygulamalar\u0131nda istemci taraf\u0131 y\u00f6nlendirme sa\u011flayan bir k\u00fct\u00fcphanedir. v4 s\u00fcr\u00fcm\u00fc, daha temiz ve esnek bir API sunar. Temel bile\u015fenleri \u00d6rne\u011fin, basit bir uygulamada:<\/p>\n Bu \u00f6rnekte, 2. Ko\u015fullu Y\u00f6nlendirme Nas\u0131l Yap\u0131l\u0131r?<\/strong><\/p>\n Ko\u015fullu y\u00f6nlendirme, kullan\u0131c\u0131 oturum a\u00e7ma durumu, rol\u00fc veya di\u011fer ko\u015fullara ba\u011fl\u0131 olarak farkl\u0131 rotalara y\u00f6nlendirme yapmay\u0131 sa\u011flar. Bunun i\u00e7in \u00d6rnek Senaryo:<\/strong> Oturum a\u00e7mam\u0131\u015f bir kullan\u0131c\u0131n\u0131n Bu \u00f6rnekte, 3. Duyarl\u0131 Y\u00f6nlendirme Nas\u0131l Yap\u0131l\u0131r?<\/strong><\/p>\n Duyarl\u0131 y\u00f6nlendirme, URL’deki parametrelere veya dinamik k\u0131s\u0131mlara ba\u011fl\u0131 olarak farkl\u0131 i\u00e7erikler g\u00f6stermeyi sa\u011flar. Bunun i\u00e7in \u00d6rnek Senaryo:<\/strong> Bir \u00fcr\u00fcn detay sayfas\u0131n\u0131 g\u00f6steren bir uygulama.<\/p>\n Bu \u00f6rnekte, 4. Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizi<\/strong><\/p>\n Senaryo 1: \u00c7oklu Rol Deste\u011fi:<\/strong> Bir e-ticaret uygulamas\u0131nda, m\u00fc\u015fteri, y\u00f6netici ve moderat\u00f6r rolleri olabilir. Her role g\u00f6re farkl\u0131 sayfalara eri\u015fim izni vermeliyiz. Bunun i\u00e7in, yetkilendirme mant\u0131\u011f\u0131n\u0131 Senaryo 2: Oturum S\u00fcresi Kontrol\u00fc:<\/strong> Kullan\u0131c\u0131n\u0131n oturum s\u00fcresi doldu\u011funda giri\u015f sayfas\u0131na y\u00f6nlendirme. Bunun i\u00e7in, oturum s\u00fcresini takip eden bir servis ve Senaryo 3: 404 Sayfas\u0131:<\/strong> Ge\u00e7ersiz bir URL’ye eri\u015fildi\u011finde 404 hatas\u0131 g\u00f6steren bir sayfa olu\u015fturmak. Bunun i\u00e7in, 5. Performans Optimizasyonu<\/strong><\/p>\n React Router’\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in a\u015fa\u011f\u0131daki teknikleri kullanabilirsiniz:<\/p>\n * 6. \u0130leri D\u00fczey Konular: Edge Case’ler ve Geli\u015fmi\u015f Teknikler<\/strong><\/p>\n * Nested Routes:<\/strong> \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f rotalar olu\u015fturmak, karma\u015f\u0131k uygulamalar i\u00e7in gereklidir. 7. React Router v4 ile \u0130lgili S\u0131k\u00e7a Sorulan Sorular<\/strong><\/p>\n 1. React Router v5 ile aras\u0131ndaki farklar nelerdir?<\/strong> v5, baz\u0131 API de\u011fi\u015fiklikleri ve performans iyile\u015ftirmeleri i\u00e7erir. Ancak, temel konseptler benzerdir.<\/p>\n 2. Ko\u015fullu y\u00f6nlendirmeyi nas\u0131l daha temiz bir \u015fekilde yapabilirim?<\/strong> Yetkilendirme ve yetkilendirme mant\u0131\u011f\u0131n\u0131 ayr\u0131 bir bile\u015fene ta\u015f\u0131yarak kodunuzu daha okunabilir ve bak\u0131m\u0131 kolay hale getirebilirsiniz.<\/p>\n 3. Duyarl\u0131 rotalarda parametreleri nas\u0131l do\u011frulayabilirim?<\/strong> Parametreleri do\u011frulamak i\u00e7in, 4. Performans sorunlar\u0131 nas\u0131l giderilir?<\/strong> 5. React Router’da hata y\u00f6netimi nas\u0131l yap\u0131l\u0131r?<\/strong> Sonu\u00e7<\/strong><\/p>\n Bu makalede, React Router v4 ile ko\u015fullu ve duyarl\u0131 y\u00f6nlendirme kurulumunu ad\u0131m ad\u0131m inceledik. Ba\u015flang\u0131\u00e7 seviyesinden ileri seviyeye kadar farkl\u0131 \u00f6rnekler ve ger\u00e7ek d\u00fcnya senaryolar\u0131 ile konuyu detayl\u0131 olarak ele ald\u0131k. Performans optimizasyonu ve olas\u0131 sorunlar hakk\u0131nda bilgi vererek, daha g\u00fc\u00e7l\u00fc ve verimli React uygulamalar\u0131 geli\u015ftirmenize yard\u0131mc\u0131 olmay\u0131 ama\u00e7lad\u0131k. Unutmay\u0131n ki, uygulaman\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olarak, daha geli\u015fmi\u015f teknikler kullanman\u0131z gerekebilir. Bu makale, bu yolculukta size temel bir rehber niteli\u011findedir. Daha fazla bilgi i\u00e7in [Fatih Soysal’\u0131n web sitesini](https:\/\/fatihsoysal.com) ziyaret edebilirsiniz.<\/p>\n Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"# React Router v4 ile Ko\u015fullu ve Duyarl\u0131 Y\u00f6nlendirme Nas\u0131l Kurulur? Karma\u015f\u0131k web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-30032","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nBrowserRouter<\/code>, Switch<\/code>, Route<\/code>, ve Link<\/code>‘tir. BrowserRouter<\/code>, uygulaman\u0131z\u0131n taray\u0131c\u0131 tarih\u00e7esini kullanmas\u0131n\u0131 sa\u011flar. Switch<\/code>, birden fazla rota tan\u0131mlad\u0131\u011f\u0131n\u0131zda sadece birinin e\u015fle\u015fmesini garanti eder. Route<\/code>, belirli bir yola kar\u015f\u0131l\u0131k gelen bile\u015feni render eder. Link<\/code>, kullan\u0131c\u0131lar\u0131 farkl\u0131 rotalara y\u00f6nlendiren ba\u011flant\u0131lar olu\u015fturur.<\/p>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Link } from 'react-router-dom';\n\nconst Home = () => <h1>Anasayfa<\/h1>;\nconst About = () => <h1>Hakk\u0131m\u0131zda<\/h1>;\n\nconst App = () => (\n <Router>\n <div>\n <nav>\n <Link to="\/">Anasayfa<\/Link> | <Link to="\/about">Hakk\u0131m\u0131zda<\/Link>\n <\/nav>\n\n <Switch>\n <Route exact path="\/" component={Home} \/>\n <Route path="\/about" component={About} \/>\n <\/Switch>\n <\/div>\n <\/Router>\n);\n\nexport default App;<\/code><\/pre>\n\/<\/code> yoluna Home<\/code> bile\u015feni, \/about<\/code> yoluna ise About<\/code> bile\u015feni render edilir. exact<\/code> prop’u, \/about<\/code> yoluna ek bir rota eklendi\u011finde yaln\u0131zca \/<\/code> yoluna tam e\u015fle\u015fmeyi sa\u011flar. Daha detayl\u0131 bilgi i\u00e7in [Fatih Soysal’\u0131n React Router rehberine](https:\/\/fatihsoysal.com\/react-router-rehberi) bakabilirsiniz.<\/p>\nRedirect<\/code> bile\u015fenini ve ko\u015fullu mant\u0131k kullan\u0131r\u0131z.<\/p>\n\/profile<\/code> yoluna eri\u015fmeye \u00e7al\u0131\u015fmas\u0131n\u0131 engellemek ve onu \/login<\/code> yoluna y\u00f6nlendirmek.<\/p>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';\n\nconst Profile = () => (\n <div>\n <h1>Profil Sayfas\u0131<\/h1>\n <p>Ho\u015f geldiniz!<\/p>\n <\/div>\n);\n\nconst Login = () => (\n <div>\n <h1>Giri\u015f Yap<\/h1>\n <button>Giri\u015f<\/button>\n <\/div>\n);\n\nconst App = () => {\n const isLoggedIn = false; \/\/ Oturum durumu\n\n return (\n <Router>\n <Switch>\n <Route exact path="\/" component={() => <h1>Anasayfa<\/h1>} \/>\n <Route path="\/login" component={Login} \/>\n <Route path="\/profile">\n {isLoggedIn ? <Profile \/> : <Redirect to="\/login" \/>}\n <\/Route>\n <\/Switch>\n <\/Router>\n );\n};\n\nexport default App;<\/code><\/pre>\nisLoggedIn<\/code> de\u011fi\u015fkeni oturum durumunu temsil eder. E\u011fer false<\/code> ise, \/profile<\/code> yoluna eri\u015fim denendi\u011finde kullan\u0131c\u0131 \/login<\/code> yoluna y\u00f6nlendirilir.<\/p>\n:paramName<\/code> s\u00f6zdizimi kullan\u0131l\u0131r.<\/p>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nconst ProductDetails = ({ match }) => (\n <div>\n <h1>\u00dcr\u00fcn Detay\u0131: {match.params.productId}<\/h1>\n {\/* \u00dcr\u00fcn detaylar\u0131n\u0131 burada g\u00f6sterin *\/}\n <\/div>\n);\n\nconst App = () => (\n <Router>\n <Switch>\n <Route exact path="\/" component={() => <h1>\u00dcr\u00fcnler<\/h1>} \/>\n <Route path="\/product\/:productId" component={ProductDetails} \/>\n <\/Switch>\n <\/Router>\n);\n\nexport default App;<\/code><\/pre>\n\/product\/123<\/code> yoluna eri\u015fildi\u011finde, ProductDetails<\/code> bile\u015feni match.params.productId<\/code> de\u011fi\u015fkeni ile 123<\/code> de\u011ferini al\u0131r ve \u00fcr\u00fcn detay\u0131n\u0131 g\u00f6sterir.<\/p>\nRoute<\/code> bile\u015feninin render<\/code> prop’u i\u00e7inde uygulayabiliriz.<\/p>\nRedirect<\/code> bile\u015feni kullanabiliriz.<\/p>\nSwitch<\/code> bile\u015feninin sonuna bir Route<\/code> ekleyip component<\/code> prop’una 404 hatas\u0131 sayfas\u0131n\u0131 atayabiliriz.<\/p>\nlazy<\/code> ve Suspense<\/code>:<\/strong> B\u00fcy\u00fck bile\u015fenleri dinamik olarak y\u00fcklemek i\u00e7in React.lazy<\/code> ve Suspense<\/code> kullan\u0131n. Bu, ilk y\u00fcklenme s\u00fcresini k\u0131salt\u0131r.
\n* Switch<\/code> Bile\u015feni:<\/strong> Sadece bir rotay\u0131 e\u015fle\u015ftirecek \u015fekilde Switch<\/code> bile\u015fenini kullan\u0131n. Gereksiz e\u015fle\u015ftirmeleri \u00f6nler.
\n* Kod B\u00f6l\u00fcmleme:<\/strong> Uygulaman\u0131z\u0131 daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6l\u00fcn ve bunlar\u0131 gerekti\u011finde y\u00fckleyin. Webpack veya di\u011fer paket y\u00f6neticilerinin kod b\u00f6l\u00fcmleme \u00f6zelliklerini kullan\u0131n.<\/p>\n
\n* Programatik Y\u00f6nlendirme:<\/strong> useHistory<\/code> hook’u kullanarak JavaScript kodundan y\u00f6nlendirme yapmak.
\n* URL Parametreleri:<\/strong> Query parametreleri (?param=value<\/code>) kullanarak rotalara ek veri ge\u00e7irmek.<\/p>\nmatch.params<\/code> i\u00e7indeki de\u011ferleri kontrol eden bir fonksiyon yazabilirsiniz.<\/p>\nReact.lazy<\/code> ve Suspense<\/code> kullan\u0131m\u0131, kod b\u00f6l\u00fcmleme ve gereksiz e\u015fle\u015fmeleri \u00f6nleme gibi optimizasyon tekniklerini uygulay\u0131n.<\/p>\ntry...catch<\/code> bloklar\u0131 kullanarak hata durumlar\u0131n\u0131 yakalayabilir ve kullan\u0131c\u0131ya uygun mesajlar g\u00f6sterebilirsiniz.<\/p>\n