React Router

React Router

React Router, React uygulamalarında sayfalar arasında gezinme işlemlerini sağlayan bir araçtır Kurulumu, npm paket yöneticisi aracılığıyla gerçekleştirilir Kurulum tamamlandıktan sonra, Router componentleri projeye eklenmelidir Router componentleri arasında en temel olanları BrowserRouter, Route, Link, Switch ve HashRouter'dir Route componenti render prop'u kullanarak yönlendirme işlemi yaparken, HashRouter componenti tarayıcı geçmişini işlemez React Router kullanılarak, uygulamaların dinamik kaynak yönetimi yapılabilmektedir Import işlemi yapılması ardından, React Router kullanıma hazırdır ve sayfa gezinme işlemleri gerçekleştirilebilir Güncel dokümanlara göre adım adım takip edilerek, React Router kullanımında en güncel teknikler kullanılabilir

React Router

React Router, React uygulamalarında sayfalar arasında navigation (yönlendirme) işlemlerinin gerçekleştirilmesini sağlayan bir araçtır. Router, hangi componentlerin render edileceğine karar verir ve işlem sırasında URL'ye göre yönlendirmeleri sağlar. React Router kullanılarak, uygulamaların dinamik kaynak yönetimi yapılabilmektedir. React uygulamasında Router kullanabilmek için öncelikle kurulumun gerçekleştirilmesi gerekmektedir.

React Router kurulumu, npm paket yöneticisi üzerinden gerçekleştirilir. 'npm install react-router-dom' komutu kullanılarak kurulum işlemi tamamlanır. Kurulumdan sonra, Router'ın kullanılabilmesi için import işlemi yapılmalı ve BrowserRouter componenti eklenmelidir. Router componentleri, sayfalar arasında gezinme işlemlerinin yanı sıra yönlendirmelerin sağlanmasını da mümkün kılar. Route, Link ve Switch componentleri Router componentlerinin en temel halleridir. React Router içerisinde bulunan HashRouter komponenti de sayfalar arasında gezinme işlemlerinin yapılabilmesini sağlar.

  • BrowserRouter: Sayfalar arasında gezinmek için kullanılır.
  • Route: URL ile birlikte verilen componenti render eder.
  • Link: Sayfalar arasında geçiş yapılmasını sağlayan componenttir.
  • Switch: Route componentlerinin doğru çalışması için kullanılır.
  • HashRouter: Sayfalar arasında gezinmek için kullanılır, tarayıcı geçmişini işlemez.

Yönlendirmelerde izin kontrolü yapmak için Route componentinin render prop'u kullanılabilir. Önceden tanımlanmış bir state değerine göre yönlendirme işlemi de gerçekleştirilebilir. React Router'in yeni versiyonları ile birlikte gelen yenilikler ve değişiklikler de değerlendirilerek, Router kullanımında en güncel tekniklerin izlenmesi sağlanır.


Router Nedir?

Router, React'ta yer alan bir araçtır ve web sayfasındaki hangi componentlerin render edileceğine karar verir. Yani, belirli bir URL adresine göre hangi componentin görüntüleneceği Router tarafından belirlenir. Bu şekilde kullanıcılar sayfalar arasında rahatça gezinebilir ve sayfa içindeki farklı bileşenleri render edebilirler.


React Router Kurulumu

React Router kullanımı için öncelikle kurulum işlemi gerçekleştirilmelidir. Kurulum işlemi için terminal penceresinde aşağıdaki kod çalıştırılması yeterlidir:

npm install react-router-dom

React uygulamasında kullanılacak olan router, react-router-dom paketi ile beraber gelmektedir. Öncelikle bu paketin yüklenmesi gerekmektedir. Kurulum işlemi tamamlandıktan sonra, kullanılacak olan componentler projeye dahil edilmelidir. Bunun için import işlemi yapılabilir ve BrowserRouter componenti projeye eklenmelidir. Kurulum işlemlerinin tamamlanması ardından, React Router kullanıma hazırdır ve yönlendirme işlemleri gerçekleştirilebilir.

Kurulum İşlemi

React Router kurulumu oldukça basit bir işlemdir. Router'ı kullanabilmek için öncelikle terminal ekranına npm install react-router-domkomutunu girerek gerekli paketleri yükleyebilirsiniz. Kurulum işlemi tamamlandıktan sonra yapmanız gereken şey ise ilgili componentleri projenize dahil etmek. Bunun için import işlemi yaptığınızda BrowserRoutercomponentini eklemeniz yeterlidir. Bu adımların tamamlandığından emin olduktan sonra React Router'ın kullanıma hazır olduğunun farkına varabilirsiniz.

React Router kurulumu ile ilgili örnek bir adım adım yol tarifi aşağıdaki gibi olabilir:

1. Terminal ekranında npm install react-router-domkomutunu girin ve gerekli paketlerin yüklenmesini bekleyin.2. React projenizin ilgili dosyasında import {BrowserRouter} from 'react-router-dom';kodunu dahil edin.3. Render fonksiyonunuzu oluşturun ve componentlerini wrapper olarak kullanarak ilgili componentleri dahil edin.4. Daha sonra componentleri uygulamanıza göre düzenleyebilirsiniz.

Bu adımları takip ederek React Router'ı kullanıma hazırlayabilir ve uygulamanızda dinamik kaynak yönetimi sağlayabilirsiniz. Ayrıca bu adımların ilgili versiyonlara göre farklılık gösterebilmesi için, güncel dokümanları takip etmenizde fayda var.

npm install react-router-dom

React uygulamasında dinamik kaynak yönetimini yapmak için router aracını kullanmak gerekmektedir. React Router'ı kullanabilmek için öncelikle npm install react-router-dom komutu çalıştırılmalıdır. Bu komut ile npm paket yöneticisi aracılığı ile React Router modülü projeye eklenir.

React Router kurulumu başarıyla tamamlandıktan sonra, import işlemi yapılmalı ve kullanılacak componentlerin eklenmesi gerekmektedir. Ayrıca, uygulama içinde URL ile uyumlu componentlerin gösterimi ve yönlendirmesi için BrowserRouter componenti kullanılmalıdır. Bu işlemler tamamlanarak React Router aracı kullanıma hazır hale getirilmelidir.

komutu çalıştırılarak gerçekleştirilir.

Komut satırına npm install react-router-dom yazarak React Router'ın kurulumunu gerçekleştirebilirsiniz. Bu işlem sonrasında, router'ı kullanmaya başlayabilirsiniz. Ancak kurulumdan sonra import işlemi yapılması ve BrowserRouter componentinin eklenmesi gerekmektedir.


Kurulumdan Sonra Yapılması Gerekenler

React uygulamasında router kullanımı için kurulumun tamamlanması ardından import işlemi yapılması gerekmektedir. İmport işleminde react-router-dom kütüphanesi kullanılmaktadır. İmport işlemi yapıldıktan sonra, BrowserRouter componenti eklenerek router kullanıma hazır hale getirilir. Bu adımlar sayesinde React uygulamasında router kullanarak dinamik sayfa yönlendirmeleri rahatlıkla gerçekleştirilebilir. Ayrıca, gerekli görsel düzenlemeler için CSS gibi diğer teknolojiler de kullanılabilir. Bu sayede, web sayfalarında kullanıcı deneyimini arttırmak ve daha profesyonel bir görüntü sunmak mümkündür.

BrowserRouter

BrowserRouter, React Router'da sayfalar arasında kolayca gezinmek için kullanılan bir componenttir. Sayfa geçişleri için gereken tüm işlevleri barındırır ve bu sayede uygulamaların yönlendirmelerini basitleştirir. BrowserRouter componentini kullanarak, uygulamanın ana bileşeni içinde gezinti işlemleri yapılabilir. Ancak, BrowserRouter'ın sağlıklı çalışabilmesi için projenin kök dizininde kurulması ve yüklü olması gerekmektedir. Aynı zamanda, sayfalar arasında gezinmek için URL'leri oluşturmak ve yönlendirmeleri tanımlamak da BrowserRouter componenti üzerinden gerçekleştirilir. Bu sayede yönlendirmelerin doğru çalışması sağlanır ve uygulamaların daha iyi bir kullanıcı deneyimi sunması sağlanır.

componenti eklenmeli.

React Router'ın kullanımı için kurulumun tamamlanmasının ardından, componenti projeye dahil edilmelidir. Bu component sayfalar arasında gezinmek için kullanılır ve projeye başarıyla eklendiğinde, yönlendirmeler yapılabilir hale gelir. İmport işlemi yapılması ve BrowserRouter componentinin eklenmesi için gerekli kodlar şu şekildedir:

```javascriptimport { BrowserRouter } from 'react-router-dom';```

```javascript ```

Bu kodlar sayesinde componenti projeye eklenir. Bu componentin kullanımı için URL ile birlikte verilen componentleri render etmek üzere componenti kullanılır. Sayfalar arasında geçiş yapmak için ise componenti kullanılır. componenti de componentlerinin doğru çalışması için kullanılır. React Router'da kullanılan temel componentlerden olan BrowserRouter'ın projeye eklenmesi ile birlikte yönlendirmeler kolayca gerçekleştirilebilir.


Router Componentleri

React uygulamalarında dinamik olarak sayfalar arasında gezinmek için router componentleri kullanılmaktadır. Router componentleri, sayfaların hangi componentlerin render edileceğine karar verir ve uygulamanın sayfa yönetimini sağlar. Bu nedenle, React uygulamalarında router kullanmak oldukça önemlidir.

React Router, React uygulamalarında kullanılan en popüler router aracıdır. Router componentleri arasında en temel olanlar, BrowserRouter, Route, Link ve Switch componentleridir. BrowserRouter, sayfalar arasında gezinmek için kullanılan temel componenttir ve sayfa yönlendirmelerinin temelini oluşturur. Route ve Link componentleri, belirli URL'ler için componentlerin render edilmesini sağlar. Switch componenti ise Router componentlerinin doğru çalışması için kullanılır.

Component Açıklama
BrowserRouter Sayfalar arasında gezinmek için kullanılır.
Route URL ile birlikte verilen componenti render eder.
Link Sayfalar arasında geçiş yapılmasını sağlar.
Switch Route componentlerinin doğru çalışması için kullanılır.

React Router'da kullanılan componentler arasında yer alan HashRouter, BrowserRouter'ın alternatifi olarak sayfalar arasında gezinmek için kullanılabilir. Ancak HashRouter, tarayıcı geçmişini işlemez ve bu nedenle bazı durumlarda uygun değildir.

React Router'in yeni sürümleri ile birlikte, router componentlerinde bazı değişiklikler yapılıyor. Örneğin, v6 ile birlikte Route componentleri üzerinde bazı değişiklikler gerçekleştiriliyor. Bu nedenle, React uygulamalarınızı güncel tutmak ve yeni özelliklerden yararlanmak için React Router'ı düzenli olarak kontrol etmek önemlidir.


BrowserRouter

BrowserRouter: React Router kullanan uygulamalarda, sayfalar arasında gezinmek ve URL'leri güncellemek için BrowserRouter componenti kullanılır. Bu component, web sayfasının URL'sini yönetir ve URL ile birlikte verilen componenti render eder. Böylece, tek sayfadan birden fazla sayfayı yönetmek ve URL'ler arasında gezinmek mümkündür.

Bu component, react-router-dom paketi ile birlikte uygulamaya dahil edildikten sonra kullanılmaya hazır hale gelir. İmport işlemi yapıldıktan sonra, uygulamanın en üstündeki component olarak tanımlanır. Ayrıca, BrowserRouter componenti içinde yer alan tüm componentlerin, birbirleriyle ilişkili olarak çalışması için, router componentlerine özgü prop'lar kullanılması gerekmektedir.

React Router'da BrowserRouter componenti kullanarak, dinamik bir web sayfasının URL yönetimini kolaylıkla gerçekleştirebilirsiniz.


Route

Route componenti, URL adresinde belirtilen path ile birlikte verilen componenti render eder. Bu sayede uygulama içinde gezinirken, farklı sayfalarda farklı componentlerin render edilmesi sağlanabilir. exact prop'u kullanılarak, sadece belirtilen path ile eşleşen URL'lerde componentin render edilmesi sağlanabilir. Ayrıca, component prop'u ile tek bir component verilerek, componentin render edilmesi sağlanabilir.

Örnek olarak, bir blog uygulamasında farklı blog yazıları için farklı URL adresleri belirtilir ve Route componenti ile bu URL'leri eşleştirmek için kullanılır. Böylece, kullanıcılar farklı yazılara gidip okuyabilirler.

Prop Adı Açıklama Örnek Kullanımı
path URL adresinde eşleşecek path <Route path="/blog/:id" component={BlogPost} />
exact Sadece belirtilen path ile eşleşen URL'lerde componentin render edilmesi sağlanır <Route exact path="/" component={Homepage} />
component Render edilecek component <Route path="/blog/:id" component={BlogPost} />

Link

React Router'da yer alan Link componenti, sayfalar arasında geçiş yapılmasını sağlayan temel bir bileşendir. Bu bileşen kullanılarak sayfalar arasında gezinmek oldukça kolay hale gelir. Link componenti, URL özellikleri ile birlikte kullanılır ve tıklanıldığında belirtilen sayfaya yönlendirme işlemi gerçekleştirilir.

Link componenti kullanırken href yerine to prop'u kullanılır. Örneğin, Anasayfa şeklinde kullanım gerçekleştirilebilir. Bu şekilde tıklanıldığında /anasayfa sayfasına yönlendirme işlemi gerçekleştirilir. Link componentini kullanırken aynı zamanda stil de tanımlanabilir. Örneğin, Anasayfa şeklinde kullanım yapılabilir. Bu şekilde tıklanılabilir bir link oluşturulmuş olur.

Link componenti, gezerken sayfaların yenilenmesine de izin verir. Bu özellik sayesinde, tek sayfa uygulamalarında (SPA) sayfalar arasında geçiş yaparken sayfa yenilemesi engellenir ve re-render işlemi gerçekleştirilir. Ayrıca, Link componenti kullanılırken react-router-dom paketinin en üst düzeyinde kurulumu yapılmış olması gereklidir. Böylece, uygulama içerisinde rahatlıkla gezinti yapılabilir ve sayfalar arasında geçiş yapılabilecek linkler oluşturulabilir.

Sonuç olarak, Link componenti, React Router'da yer alan önemli bir bileşendir. Bu bileşen sayesinde sayfalar arasında geçiş yapmak oldukça kolay hale gelir ve SPA uygulamalarında yenileme engellenir. Link kullanımı ile belirtilen sayfalara yönlendirme işlemi gerçekleştirilir ve aynı zamanda stil tanımları da yapılabilmektedir.


Switch

React Router'da kullanılan Switch componenti, uygulama içerisindeki Route componentlerinin doğru bir şekilde çalışabilmesi için kullanılır. Switch'in görevi, Route componentleri arasında geçiş yaparken sadece ilk eşleşen Route componentine yönlendirmeyi sağlamaktır. Böylece, birden fazla URL'in aynı component üzerinden render edilmesi veya birden fazla componentin aynı URL için çalışması engellenir.

Switch componenti içerisinde birden fazla Route componenti yer alabilir. Bu Route componentleri, Switch içindeki sıralarına göre değerlendirilirler. Eşleşme bulunursa, sadece ilk eşleşen Route componentinin render işlemi gerçekleştirilir, diğerleri yok sayılır. Eğer hiçbir Route componenti eşleşmezse, varsayılan olarak belirlenmiş NotFound componenti render edilir.

Switch componenti aynı şekilde Redirect componenti ile birlikte kullanılarak, yönlendirme işleminin doğru şekilde yapılması sağlanabilir. Redirect componenti, belirli bir URL'e yönlendirmek için kullanılır ve Switch içerisinde bulunan Route componenti ile birlikte çalışarak, yönlendirmenin gerçekleştirilmesini sağlar.

Özetle, Switch componenti, React Router uygulamalarında çok önemli bir role sahiptir. Uygulama içerisindeki Route componentlerinin doğru çalışabilmesi için kullanılır ve eşleşme bulunan ilk Route componentinin render edilmesini sağlar. Yönlendirmelerde ve sayfa gezinmelerinde büyük bir kolaylık sağlayan Switch componenti sayesinde, React Router uygulamaları daha hızlı, kullanışlı ve kolay bir şekilde yönetilebilir.


HashRouter

HashRouter, react router içinde yer alan bir componenttir. Sayfalar arasında gezinmek için kullanılır ve tarayıcı geçmişini işlemez.

HashRouter ile URL'ler oluşturulurken, URL'nin sonuna "#" (hash) sembolü eklenir. Bu sayede, HashRouter ile gezinilen sayfalar tarayıcı geçmişinde bir kayıt oluşturmaz. Bu özellik, belirli durumlarda tercih edilir. Örneğin, tek sayfalık uygulamalarda, kullanıcı rahat bir gezinti deneyimi yaşayabilir. Bunun yanı sıra, HashRouter ile birlikte gelen özellikler de vardır. Bu özellikler, sayfalar arasındaki geçişleri daha da kolaylaştırır.

HashRouter componenti, BrowserRouter gibi kullanılır. BrowserRouter yerine HashRouter kullanmak istendiğinde, aşağıdaki import işlemi yapılabilir:

    import { HashRouter as Router, Route, Link } from "react-router-dom";    

Component kullanımı açısından, HashRouter'in de içinde yer alan sayfalara yönlendirmek için Route componenti kullanılır. Aynı zamanda, sayfalar arasında gezinti yapmak için de Link componenti kullanılır.

HashRouter'in kullanımı aşağıdaki örnekle gösterilebilir:

    import { HashRouter as Router, Route, Link } from "react-router-dom";function App() {  return (    <Router>      <div>        <nav>          <ul>            <li>              <Link to="/">Ana Sayfa</Link>            </li>            <li>              <Link to="/about">Hakkımızda</Link>            </li>            <li>              <Link to="/contact">İletişim</Link>            </li>          </ul>        </nav>        <Route exact path="/" component={HomePage} />        <Route path="/about" component={AboutPage} />        <Route path="/contact" component={ContactPage} />      </div>    </Router>  );}    

Bu örnek, HashRouter ile sayfalar arasında gezinmek için kullanılır. Router componentinin içinde yer alan Route componentleri, sayfalar arasındaki geçişleri sağlayan temel componentlerdir. Ayrıca, Link componentleri de sayfalar arasında gezinti yapılmasını sağlar.

Sonuç olarak, HashRouter ile sayfalar arasında gezinmek BrowserRouter'a göre biraz daha farklıdır. Tarayıcı geçmişini işlemediği için belirli durumlarda tercih edilebilir. Ayrıca, componentleri de BrowserRouter gibi kullanılır, bu nedenle kullanımı oldukça basittir.


Yönlendirmelerde İzin Kontrolü

componentinin render prop'u kullanılabilir. Bu sayede, belirli koşulları sağlamayan kullanıcılar farklı bir sayfaya yönlendirilebilir. Örneğin, kullanıcı giriş yapmadan önce belirli sayfalara erişimi engellemek için bir izin kontrolü yapılabilir.

Bir örnek için, kullanıcının giriş yapmadan önce profil sayfasına erişmeye çalıştığını düşünelim. componenti içinde render prop'u kullanılarak, önceden tanımlanmış bir state değerine göre yönlendirme işlemi gerçekleştirilebilir. Eğer kullanıcı giriş yapmamışsa, profil sayfasına erişemeyecektir ve belirtilen sayfaya yönlendirilecektir.

Bu yöntem ile yönlendirmelerde izin kontrolü yapmak, kullanıcıların belirli sayfalara erişimini kontrol altında tutarak daha güvenli bir deneyim sağlamaya yardımcı olur.

Route

componenti, URL ile birlikte verilen componenti render etmek için kullanılır. Bu component, gösterilebilecek birden fazla sayfanın olduğu uygulamalarda yönlendirme işlemleri için kullanılabilecek en temel componentlerden biridir. Her URL için doğru componentin render edilmesini sağlar. Bu sayede uygulamanızın farklı bölümlerine erişim sağlanabilir. Route componentinde belirtilen URL'ye uygun olan component render edilirken, diğerleri göz ardı edilir. Ayrıca exact prop'u kullanılarak sadece özgün URL'lere erişim sağlanabilir. Örneğin, /users URL'sindeki component sadece exac prop ile belirlenirse, /users/123 gibi diğer URL'lerin etkisi altında kalmaz. Bu sayede kullanıcının istenmeyen sayfalara veya bilgilere erişmesi engellenir.

componentinin

Route componentinin bir başka kullanım şekli de render propu kullanarak yönlendirmelerde izin kontrolü yapmaktır. Bu yöntemde, belirli bir koşulu sağlayan durumlarda yönlendirme işlemi gerçekleştirilebilir. Örneğin, belirli bir state değeri doğrultusunda veya kullanıcının giriş yapmış olup olmadığına göre yönlendirme işlemi gerçekleştirilebilir. Bu şekilde, özel izin kontrolleri yapılarak uygulamanın daha güvenli hale getirilmesi sağlanabilir.

Ayrıca, Route componentinin render propu kullanılarak dinamik olarak component değişiklikleri de gerçekleştirilebilir. Bu sayede, farklı tipte kullanıcıların farklı sayfaları görebilmesi veya farklı özelliklere sahip olan kullanıcıların farklı componentleri görüntülemesi mümkün hale gelir.

Route componentinin render propu kullanımı ile ilgili özet tablo aşağıdaki gibidir:

PropAçıklama
pathYönlendirme yapılacak path
exactEşleşme tam olarak belirtilen pathe uymalıdır
renderComponent yerine kullanılacak fonksiyonu tanımlar
componentYönlendirilecek component
locationYönlendirme işlemi için belirtilen location
computedMatchPath eşleşmesi yapılmışsa match nesnesini kullanır

React'taki router aracı sayesinde uygulamalarda dinamik kaynak yönetimi sağlanarak, kullanıcılara daha iyi bir deneyim sunulabilir. Route componentinin render propu kullanılarak yapılacak izin kontrolleri ve dinamik component değişiklikleri, uygulamanın daha güvenli ve kullanışlı hale getirilmesine yardımcı olur.

render

Render işlemi, React Router'da URL için belirtilen path ile eşleşen component'in ekranda görüntülenmesini sağlar. Böylece dinamik bir şekilde sayfa içeriği yönetilebilir. React Router'da render işlemi için Route componenti kullanılır. Bu component, URL ve belirtilen component arasındaki bağlantıyı kurar ve component'in doğru şekilde görüntülenmesini sağlar.

prop'u kullanılabilir.

componentinde, render prop'u kullanılarak yönlendirme işlemlerinde izin kontrolü yapılabilir. Örneğin, önceden tanımlanmış bir state değeri kontrol edilerek, kullanıcının yönlendirilip yönlendirilmeyeceğine karar verilebilir. Böylece, kullanıcının izni olmadan belirli bir sayfaya erişimi engellenebilir. Bu, güvenlik açısından oldukça önemlidir ve React Router ile kolayca uygulanabilir. Ancak, izin kontrollerinin kullanımı hatalı uygulanırsa, kullanıcılara erişim hakkı verilebilir veya tamamen engellenebilir. Bu nedenle, izin kontrolleri düşünülürken dikkatli olunmalı ve doğru şekilde uygulanmalıdır.


Örnek Kullanım

React Router, uygulamalarında sayfalar arasında yönlendirmeye ihtiyaç duyan geliştiriciler için oldukça işlevsel bir router aracı sunmaktadır. Yönlendirme işlemlerinde izin kontrolleri yapmak, kullanıcıların güvenliği açısından oldukça önemlidir. React Router'da, kullanıcının belirli bir state değerine göre yönlendirme yapması gereken durumlarda, Route componentinin render prop'u kullanılabilir.

Örneğin, uygulamada kullanıcının giriş yaptığı kontrol edildikten sonra, belirli bir açılış sayfasına yönlendirilmesi gerekiyorsa, bu işlem Route componentinin render prop'u ile gerçekleştirilebilir. Bu sayede, kullanıcının belirli bir state değeri olmadan sayfalara erişmesinin önüne geçilebilir.

Bunun yanı sıra, Redirect componenti de kullanıcıların belirli bir state değerine göre yönlendirilmesinde kullanılabilir. Ancak, bu yöntem Route componentinin render prop'una göre daha az esneklik sunar.


React Router'da Yapılan Yenilikler

React Router'in yeni sürümleri ile birlikte gelen yenilikler ve değişiklikler son derece önemlidir. Özellikle v6'da yapılan değişiklikler sayesinde daha esnek ve anlaşılır bir yapı ortaya çıkmıştır.

Bunlar arasında öne çıkan değişikliklerden biri, artık Route componentinin children prop'unu kullanabilme imkanıdır. Bu sayede, Route componenti içinde render edilen componentler daha net bir şekilde görülebilir hale gelmiştir.

Öte yandan, useRoutes hook'u yenilenerek, Router componenti dışında kullanılabilme imkanı da sağlanmıştır. Bu sayede, uygulamaların daha modüler bir şekilde tasarlanması mümkün hale gelmiştir.

Ayrıca, artık useParams hook'una ek olarak useParam hook'u da kullanılabilir hale gelmiştir. Bu sayede, bir URL parametresinin değiştiği zaman, sadece etkilenen componentin yeniden render edilmesi sağlanarak, performans artışı elde edilmiştir.

React Router v6 ile birlikte ayrıca, tarayıcı geçmişini kontrol etmek için kullanılan push, replace, goBack ve goForward metodları da yenilenmiştir. Bu sayede, daha esnek bir geçmiş yönetimi yapılabilmektedir. Ayrıca, Outlet componenti de v6'da kullanıma sunulmuş ve birden fazla componenti render etmek mümkün hale gelmiştir.

Tüm bunlar gösteriyor ki, React Router geliştiricileri, kullanıcı deneyimini iyileştirmeye ve uygulamaların daha iyi çalışmasını sağlayacak yenilikler yapmaya devam ediyorlar.


v6'daki Değişiklik ve Yenilikler

v6 sürümüyle birlikte, React Router'ın componentleri üzerinde yapılan bazı önemli değişiklikler ve yenilikler mevcuttur. Yenilenen sürümde, birçok hata giderilmiş ve uygulamaların daha hızlı ve sorunsuz çalışmasına olanak sağlanmıştır. İşte v6'daki en önemli değişiklikler:

  • Değişen Component Adları: v6 sürümüyle birlikte, bazı componentlerin isimleri değiştirilmiştir. Örneğin, BrowserRouter yerine Router kullanılırken, Route componentinin yerini Routes ve Link componentinin yerini LinkTo almıştır.
  • LinkTo Componenti: Yeni sürümle birlikte gelen LinkTo componenti, Link componentinin yerini almıştır. Yalnızca component adı değil, kullanım şeklinden dolayı da değişen LinkTo, artık alabileceği biçimlerle Route componentleriyle daha uyumlu hale gelmiştir.
  • Nested Routes: Bir önceki sürümlerde nested routes yapmak oldukça karışık bir işlemdi. Yeni sürümle birlikte, nested route yapmak oldukça kolay hale gelirken, bu sayede kod tekrarı da azalmıştır. Artık ayrı ayrı Route componentleri yerine, tek bir Routes componenti içinde nested route yapılabilir.
  • Redirection Componenti: Önceki sürümlerde redirection yapmak için manuel olarak componentler oluşturulması gerekiyordu. Yeni sürümle birlikte Redirect componenti, yönlendirmeleri çok daha kolay hale getirdi. Yalnızca bir Route componenti üzerinden yapılan yönlendirmeler için kullanılabilen Redirect, argümanlara ve objelere göre yönlendirmeler yapılmasına olanak sağlar.
  • Route Matcher: v6 sürümüyle birlikte, Route componentinde kullanılan matcher alanı artık bir fonksiyon olarak ele alınmıştır. Bu sayede, matcher alanında daha esnek bir şekilde çalışmak ve daha karmaşık yönlendirmeler yapmak mümkün hale gelmiştir.

Yukarıdaki yeniliklerle birlikte, React Router'ın v6 sürümü, web uygulamalarının gelişimine yol açacak birçok değişiklik sunmuştur. Bu değişiklikler, React Router'ın daha kullanışlı, daha hızlı ve daha güvenli hale gelmesine olanak sağlamıştır.