React Router, SPA'lar için geliştirilmiş bir yönlendirme kütüphanesidir React Router'ın temel yapısı Router, Route ve Link bileşenlerinden oluşur Router bileşeni, uygulamanın tüm yönlendirmelerini yönetir ve uygulamanın kök bileşeni olmalıdır Route bileşeni, belirli yolların eşleştiği bileşendir Link bileşeni ise, tıklanabilir bir link oluşturur ve kullanıcıyı belirli bir yola yönlendirir
React Router'ı npm paketi veya CDN üzerinden indirerek projenize ekleyebilirsiniz Router bileşenini kullanarak uygulamanızın ana yolunu belirleyebilir, Route bileşeni ile belirli yolların nasıl eşleşeceğini belirleyebilir ve Link bileşeniyle de belirli yollara tıklanarak o yola yönlendirebilirsiniz
Route bileşeni birden fazla yolu aynı bileşene eşleştirmek için kullanılabilir ve exact prop'u kullanılarak yolu tam olarak eşleştirmek de mümkündür Link bileşeni ise, to

React Router, SPA'lar için geliştirilmiş bir yönlendirme kütüphanesidir. React Router, bir web uygulamasının farklı url'lere göre farklı bileşenlerin render edilmesini sağlar. Bu, kullanıcı deneyimini artırır ve web uygulamanızın daha organik bir yapıya sahip olmasını sağlar.

Bu yazıda, React Router'ın ne olduğunu, nasıl kullanılabileceğini ve özelliklerini ele alacağız. React Router, uygulamanın yönlendirmelerini kolayca ele almanızı sağlar. Ayrıca, uygulamanızın organizasyonunu da kolaylaştırır. Bu sayede, büyük ölçekli web uygulamaları bile daha kolay bir şekilde yönetilebilir.

React Router Kurulumu

React Router, SPA'lar için geliştrilen bir yönlendirme kütüphanesidir. React Router'ı projenize eklemek için iki seçeneğiniz vardır. İlk seçenek, npm paketini projenize yüklemek için kullanılır. İkinci seçenek ise CDN üzerinden indirerek kullanmak için tercih edilir. Bu bölümde, npm paketini kullanarak React Router'ı nasıl yükleyeceğimizi ele alacağız.

React Router'ı projenize yüklemek için aşağıdaki adımları izleyebilirsiniz:

• Öncelikle, projenize terminal veya komut satırından erişin.
• Ardından, "npm install react-router-dom" komutunu çalıştırın.
• npm paket yöneticisi, React Router'ı projenize indirmeye başlayacak ve kurulum işlemi tamamlandığında, projenizde kullanmaya hazır olacak.

Eğer CDN'i kullanmak isterseniz, React Router'ın son sürümünü indirerek projenize ekleyebilirsiniz. Ancak, npm paketinden yüklemek hem daha hızlı hem de daha kolaydır.

React Router Kullanımı

React Router, SPA'lar için tasarlanmış bir yönlendirme kütüphanesidir ve temel yapısı Router, Route ve Link bileşenlerinden oluşur. Router, uygulamanın tüm yönlendirmelerini yönetir ve uygulamanın kök bileşenidir. Route bileşeni, belirli yolların eşleştiği bileşendir. Path prop'u kullanarak yolu belirler ve component prop'u kullanarak hangi bileşenin render edileceğini belirler. Link bileşeni, tıklanabilir bir link oluşturur ve kullanıcıyı belirli bir yola yönlendirir.

React Router kullanımı oldukça basittir. Router bileşenini kullanarak uygulamanın ana yolunu belirleyebilirsiniz. Ardından, Route bileşeni ile belirli yolların nasıl eşleşeceğini belirleyebilirsiniz. Link bileşeniyle de belirli yollara tıklanarak o yola yönlendirilebilirsiniz.

Örneğin, bir blog uygulamasında, ana sayfa yolunun "/" olduğunu varsayalım. Bu durumda, Router bileşenini kullanarak ana sayfa yolu belirlenebilir. Ardından, Route bileşeni ile "/postlar" yolu belirlenerek postlar sayfasına yönlendirilebilir. Link bileşeni kullanılarak da "/iletisim" sayfasına tıklanarak yönlendirilebilirsiniz.

Router Bileşeni

React Router'ın temel yapısı Router, Route ve Link bileşenlerinden oluşur. Router bileşeni, uygulamanın tüm yönlendirmelerini yönetir ve uygulamanın kök bileşeni olmalıdır. Router bileşeni, uygulamanın tüm bileşenlerini kapsayan bir ana yapıdır. Bu bileşen, uygulamada gezinme yaparken kullanılan URL'leri yönetir ve uygulamanın belirli alanlarına yönlendirir. Router bileşeni, tüm Route bileşenlerini kontrol eder ve kullanıcının gezdiği yolları günceller.

Router bileşeni birkaç farklı türde olabilir. Bunlar HashRouter, BrowserRouter ve MemoryRouter'dir. HashRouter, URL'leri bir hashtag ile kullanır. BrowserRouter, URL'leri gerçek URL'ler ile kullanır. MemoryRouter ise, tüm URL'leri hafızada tutar. Hangi Router bileşeninin kullanılacağı, projenin ihtiyacına bağlıdır.

Route Bileşeni

React Router'ın en önemli bileşenlerinden biri olan Route bileşeni, uygulamanızdaki belirli yolların eşleşmesinden sorumlu bir bileşendir. Yol, path prop'u kullanarak belirlenir ve eşleştirildiğinde, component prop'u kullanarak hangi bileşenin render edileceğini belirler.

Route bileşeni, birden fazla yolu aynı bileşene eşleştirmek için kullanılabilir. Bu, özellikle uygulamanızda benzer sayfalarınız varsa kullanışlıdır. Ayrıca, belirli bir yolu almak için Route bileşeni kullanabilir veya dinamik yollar oluşturmak için parametreleri kullanabilirsiniz.

Ayrıca, bir Route bileşeni oluştururken, exact prop'unu da belirleyebilirsiniz. Bu prop, yolu tam olarak eşleştirmek için kullanılır. Örneğin, path prop'unu "/about" olarak belirlediğinizde ve exact prop'unu da belirlediğinizde, yalnızca "/about" yoluna sahip bir Route bileşeni eşleşir.

Route bileşenini kullanırken, render prop'u yerine component prop'unu kullanmayı tercih edebilirsiniz. Render prop'u, işlev belirtmek için kullanılırken, component prop'u bireysel bir bileşen belirtmek için kullanılır. Bu, uygulamanızdaki performansı artırabilir.

Link Bileşeni

React Router'da Link bileşeni, kullanıcıların belirli bir yere yönlendirilmesi için tıklanabilir bir bağlantı oluşturur. Bu bileşen, basit bir HTML <a> etiketine benzer şekilde kullanılabilir, ancak sayfanın yeniden yüklenmesi yerine React Router, kullanıcının belirtilen URL'ye gitmesini sağlar. Bu da uygulamanın daha hızlı çalışmasına yardımcı olur.

Link bileşeni iki farklı prop alabilir: to ve replace. to prop'u, kullanıcının yönlendirilmek istenen URL'sini belirtir. Örneğin:

    {`Hakkında`}    

Bu kod örneğinde Link bileşeni, kullanıcının "/about" yoluna gitmesini sağlar.

replace prop'u genellikle browser geçmişiyle ilişkili problemleri çözmek için kullanılır. Bu prop ayarlandığında, geçmişteki bir sayfayı yeniden yüklemek yerine, kullanıcı yeni sayfaya yönlendirilir ve eski sayfa geçmişten silinir. Örneğin:

    {`Kontakt`}    

Bu örnek kodda Link bileşeni, "/contact" yoluna gitmek ve eski sayfayı tarayıcı geçmişinden silmek için replace prop'u ile birlikte kullanılır.

React Router Özellikleri

React Router, web uygulamalarının yönlendirmeleri için gerekli olan birçok özelliği sağlar. İşte React Router'ın bazı önemli özellikleri:

• Nested Routes: React Router, iç içe yönlendirmeleri desteklediğinden, büyük uygulamalarınızda bileşenlerinizi daha iyi organize edebilirsiniz.
• Redirecting: Redirecting özelliği, kullanıcının belirli bir sayfaya eriştiğinde otomatik olarak yönlendirilmesini sağlar. Örneğin, belirli bir URL'nin eski veya yeni bir URL'ye yönlendirilmesi için kullanılabilir.
• Lazy Loading: React Router, bileşenlerinizi geciktirilmiş olarak yüklemenize olanak tanır. Bu özellik, uygulamanızın yükleme süresini azaltır ve daha hızlı çalışmasını sağlar.
• Route Guards: Route guards özelliği, yönlendirmelerin önceden filtrelenmesini sağlar. Örneğin, kullanıcının belirli bir sayfaya erişimi olup olmadığını kontrol etmek için kullanılabilir.

React Router'ın diğer birçok özelliği de vardır, ancak yukarıdakiler, temel özelliklerinin yanı sıra özellikle önemlidir. Bu özellikler, web uygulamanızda yönlendirmeleri basitleştirmenize ve gerekli olan özellikleri sağlamanıza yardımcı olacaktır.

Nested Routes

React Router, iç içe yönlendirmeleri destekler. Bu özellik, daha büyük ölçekte bir uygulama geliştirdiğinizde bileşenlerinizi daha iyi organize etmenizi sağlar. Örneğin, bir e-ticaret uygulamasında, bir ürün sayfası içinde bir yorumlar sayfası veya bir ödeme sayfası gibi alt sayfaları yönlendirmek için kullanabilirsiniz.

Bu özelliğin kullanımı oldukça basittir. Nested Route oluşturmak için, Route bileşenini, bir başka Route bileşeni içine yerleştirmeniz yeterlidir.

Örneğin; uygulamanızda Ana Sayfa, Ürünler Sayfası ve Ürün Detay Sayfası olacak şekilde bir yapı oluşturmak istediğinizi düşünelim. Ana Sayfa içinde Ürünler Sayfası'nı, Ürünler Sayfası içinde de Ürün Detay Sayfası'nı yönlendirmek istediğinizde, aşağıdaki kod yapısını kullanabilirsiniz:

  <Router>    <Route path="/" exact component={HomePage} />    <Route path="/products" component={ProductsPage} />    <Route path="/products/:id" component={ProductDetailPage} />  </Router>    

Burada, "/" yoluna tam olarak eşleşen ana sayfa bileşeni, tek eşleşme özelliği ile "exact" özelliği kullanılarak yönlendiriliyor. "products" yoluna eşleşen bileşen ise, bir alt sayfa bileşeni olan "product-detail" bileşeni içeriyor. Bu şekilde, kullanıcı 'products' sayfasındayken, yan sekmeden belirli bir ürünün detay sayfasına yönlendirilebilir.

Redirecting

React Router, kullanıcının belirli bir sayfaya eriştiğinde otomatik olarak yönlendirilmesini sağlayan bir özellik sunar. Bu, örneğin belirli bir URL'nin eski veya yeni bir URL'ye yönlendirilmesi için kullanılabilir. Bunu yapmak için, Redirect bileşenini kullanabilirsiniz.

Redirect bileşeninin kullanımı oldukça basittir ve yapmanız gereken tek şey, to prop'una yönlendirme yapılacak olan URL'yi belirtmektir. Ayrıca, from prop'u kullanarak belirli bir URL için yönlendirme yapabilirsiniz. Örneğin:

import { Redirect } from 'react-router-dom';function App() {  return (    
          
  );}

Bu örnekte, kullanıcının "/eski-URL" sayfasına erişmesi durumunda, otomatik olarak "/yeni-URL" sayfasına yönlendirilir.

Ayrıca, bazı durumlarda yönlendirmeleri programatik olarak gerçekleştirmek isteyebilirsiniz. Bu durumda, history.push() yöntemini kullanabilirsiniz. Örneğin:

import { useHistory } from 'react-router-dom';function App() {  let history = useHistory();  function handleClick() {    history.push('/yeni-URL');  }  return (    
              Sayfayı Yönlendir          
  );}

Bu örnekte, kullanıcı butona tıkladığında, "/yeni-URL" sayfasına programatik olarak yönlendirilir.

Redirecting özelliği, kullanıcının deneyimini optimize etmek için oldukça önemlidir. Eski veya değiştirilmiş URL'leri yeni bir URL'ye yönlendirerek, kullanıcıların istedikleri sayfaya hızlıca erişmelerini sağlayabilirsiniz.

Lazy Loading

React Router, SPA'lar için geliştirilmiş bir yönlendirme kütüphanesi olması nedeniyle uygulamaların yüklenmesinde zaman kaybı yaşanabilir. Ancak React Router, bileşenlerinizi geciktirilmiş olarak yüklemenize olanak tanır. Bu özellik, uygulamanızın yükleme süresinde azalma sağlar ve daha hızlı çalışmasına olanak tanır.

Bu özelliği kullanmak için, React.lazy fonksiyonunu kullanarak bileşeninizi yüklemeyi bekleyen bir bileşenin fabrika işlevini oluşturmanız gerekir. Bu bileşen, dinamik olarak yüklendiğinde yalnızca işlevsel bileşenin kendisini içerecektir.

React.lazy fonksiyonu, genellikle Suspense bileşeniyle birlikte kullanılır. Suspense bileşeni, yüklenen bileşenlerin yerini tutarak belirtilen bir süre boyunca bir araştırıcı gösterir.

Örneğin, bir görüntü işleme sayfasında, ana bileşenin yüklenmesi gereken mümkün olduğunca az ertelenmelidir. Bu, kullanıcının uygulamayı kullanmaya başlama hızını artırır.

Route Guards

React Router, route guards özelliği sayesinde, bir yönlendirmenin önceden filtrelenmesini sağlar. Bu, kullanıcının belirli bir sayfaya erişebilmesi için önceden belirlenmiş koşulların sağlanması gerektiğinde kullanışlı olabilir. Örneğin, kullanıcının sadece login olmuş kullanıcılar tarafından görüntülenebilen bir sayfaya erişim sağlamasına izin vermek isteyebilirsiniz.

Bunun için, Route bileşenlerinin render prop'u kullanılabilir. Örneğin:

  {loggedIn ? (      ) : (      )}

Bu durumda, loggedIn true olduğunda, PrivateComponent bileşeni gösterilecektir. Aksi takdirde, kullanıcı login sayfasına yönlendirilecektir.

Bu şekilde, React Router ile güvenli bir şekilde yönlendirme yapmak, kullanıcı erişimini kontrol etmek oldukça kolay hale gelir.