React Router, URL'leri bileşenlerle eşleştirmek ve düzenlemek için kullanılan bir kütüphanedir Single Page Application'lar için özellikle uygundur ve kullanıcıların uygulama arasında gezinmelerine ve farklı sayfalar arasında hareket etmelerine olanak tanır Link ile farklı sayfalar arasında gezinme yapılabilirken, NavLink ile kullanıcının bulunduğu sayfanın aktif olan linki ayrımını yapabilmesi sağlanır Özel işaretleyicileri kullanarak sayfa değiştirildiğinde belirli bir işlemi gerçekleştirmek mümkündür Aktif olan bağlantıya farklı bir stil uygulamak için activeStyle kullanılabilir

React Router, React uygulamaları için bir yönlendirme kütüphanesidir. Bu kütüphane, URL'leri uygulama bileşenleriyle eşleştirmek ve düzenlemek için kullanılır. React Router, kullanıcıların uygulama arasında gezinmelerine ve farklı sayfalar arasında hareket etmelerine olanak tanır.

React Router, Single Page Application (SPA) geliştirme için özellikle uygundur. SPA, kullanıcı deneyimini geliştirirken, ana sayfada tek bir HTML belgesinin yüklenmesini sağlamak için JavaScript'te yapılan bir tür uygulamadır. React Router, uygulamanın herhangi bir bölümünün uygulama bileşenleriyle eşleştirilmesine olanak tanır.

React Router aynı zamanda, uygulamaların farklı platformlar arasında paylaşımını ve yönetimini de kolaylaştırır. Bu kütüphane, uygulama bileşenlerinin tamamen ayarlanmasına veya değiştirilmesine olanak tanırken, kullanıcılara sorunsuz bir deneyim sunar.

Bu makalede React Router kütüphanesi hakkında temel bilgiler yer almaktadır. Bu kütüphane modern web sitelerinin olmazsa olmazlarındandır. Bu yüzden, içeriği ve özellikleri tam olarak anlamak, öğrenmeniz gerekmektedir.

Link Kullanımı

React Router, web uygulamaları oluştururken kullanılan bir kütüphanedir. Bu kütüphane ile birlikte, kullanıcıların farklı sayfalar arasında gezinmelerini sağlamak mümkündür. Link özelliği kullanarak farklı sayfalar arasında gezinme yapabilirsiniz. Link özelliği, HTML'deki a etiketi ile benzerlik göstermektedir.

Örneğin, bir menü içerisindeki herhangi bir linke tıkladığınızda, uygulama otomatik olarak yeni bir sayfaya yönlendirecektir. Bu sayede, kullanıcıların ana sayfadan farklı sayfalara gitmeleri mümkündür. Bu kullanım, SPA (Single Page Application) uygulamalarında oldukça sık bir şekilde kullanılır.

Bu özelliği kullanmak oldukça basittir. Öncelikle, React Router kütüphanesini yükleyerek uygulamamıza eklemeliyiz. Daha sonra, Link özelliğini kullanarak, farklı sayfalara ilişkin URL'leri oluşturabiliriz. Bu URL'leri farklı bileşenlere bağlayarak, her bir bileşenin farklı bir sayfaya yönlendirmesini sağlayabiliriz.

Bu sayede, kullanıcılarımızın uygulamamız içerisinde rahat bir şekilde gezinmelerini sağlayabilir, daha düzenli bir arayüz tasarımı oluşturabiliriz. Bu da, kullanıcı dostu bir uygulama tasarlamak için oldukça önemlidir.

NavLink Kullanımı

React Router, Single Page Application'lar için URL yönetimini kolaylaştıran bir kütüphanedir. NavLink, yönlendirmeleri oluşturmanın yanı sıra, kullanıcının bulunduğu sayfanın aktif olan linki ayrımını yapabilmesini sağlar.

Bu özellik, daha okunaklı ve anlaşılır bir kullanıcı deneyimi sağlar. NavLink'in kullanımı oldukça basittir. Sadece "to" prop'una gitmek istediğiniz yolu yazmanız gerekir.

Eğer belirli bir bağlantının aktif olmasını istiyorsanız, "activeClassName" ya da "activeStyle" prop'larını kullanabilirsiniz. "activeClassName" prop'u kullanılarak aktif olan link için özel bir CSS sınıfı atanabilir ve CSS ile düzenlenebilir.

Ayrıca, "activeStyle" prop'u aktif olan link için stil tanımlamak için kullanılabilir. Bu prop, stillendirme yapmak istediğiniz nesneler (örneğin, arka plan rengi) için stil özelliklerini içerir. NavLink'i kullanarak, aktif olan linki belirlemek ve kullanıcının bulunduğu yolu göstermek oldukça kolaydır.

Özel İşaretleyiciler

React Router'da NavLink kullanırken özel işaretleyicileri kullanarak sayfa değiştirildiğinde belirli bir işlemi gerçekleştirmek mümkündür. Örneğin, sayfa değiştiğinde menünün açık kalmasını sağlamak için NavLink'e isActive özelliği eklenir. Bu özellik, linkin bulunduğu sayfanın tam adresiyle NavLink'in to olan prop'ı karşılaştırır. Eğer her ikisi de aynıysa, işaretleyici eklenir ve stil uygulanır.

Ayrıca NavLink özelliği olan replace de kullanılabilir. Bu özellik, useNavigate ile aynı işlevi görür. Sayfa değiştirildiğinde adres çubuğunda geriye gitme butonuna gerek kalmadan direk önceden belirlediğimiz sayfaya yönlendiriliriz. isActive özelliğinde olduğu gibi yerine replace ile belirtilen component veya sayfaya geçiş yapılır ve işaretleme yapılır. Özel işaretleyiciler ile birlikte href yerine to kullanılır ve style özelliği kullanarak stil uygulayabiliriz.

Özetle, NavLink'in özel işaretleyicileri hem sayfalar arası geçişin kontrolünü sağlar hem de sayfalar arasında geçiş esnasında belirli işlemleri gerçekleştirilmesi için kullanılabilir. Bu özellikler, React Router kullanımını daha esnek hale getirir ve kullanıcılara daha iyi bir deneyim sunar.

Active Style

Aktif olan bağlantıya farklı bir stil uygulayabilmek için, NavLink'in props özelliği olan activeStyle kullanılabiliyor. Bu özellik, aktif olan bağlantıya özel bir stil uygulamak için kullanılıyor ve nesne olarak tanımlanıyor. Özellikle, birkaç stil öğesi içeren bir nesne olabilir.

Örneğin, bağlantı seçili olduğunda farklı bir arka plan rengiyle vurgulanmasını istiyorsak, şöyle bir nesne tanımlayabiliriz:

```javascriptconst activeLinkStyle = { backgroundColor: "yellow", textDecoration: "none"};```

Burada, activeStyle özelliği için backgroundColor ve textDecoration özellikleriyle bir nesne oluşturduk. NavLink componenti içinde activeStyle özelliğini kullanarak, bu oluşturduğumuz stili bağlantıda kullanabiliriz.

```htmlHakkımızda```

Bu bağlantı seçili olduğunda arka planı sarı renk olacaktır. Bu özellik, bağlantı seçildiğinde ek bir vurgulama yapmak istediğimiz durumlarda oldukça kullanışlıdır.

Bu örnek üzerinden yola çıkarak, farklı stiller ve özellikler içeren nesneler oluşturarak, bağlantılarımızı çok daha kişiselleştirebiliriz.

Active Class

Aktif sınıf, özellikle birden fazla yönlendirme bağlantısına sahip olduğumuzda kullanışlı bir özelliktir. React Router, geçerli bağlantıya özel bir CSS sınıfı eklemek için "activeClassName" özelliğini kullanmamıza olanak tanır. Bu özellik, belirtilen sınıf adını, geçerli bağlantı için ekler ve etkin olmayan bağlantılar için sınıf adını kaldırır. Bu, stil değişikliklerinin yapılabilmesine imkan verir.

Örneğin, ana menümüzdeki "Hakkımızda" sayfasına yönlendiren bir bağlantımız olsun. Aktif CSS sınıfı, sayfanın alt kısmındaki menüde, "Hakkımızda" bağlantısını vurgulayarak farklı bir şekilde görünmesini sağlayabilir. activeClassName özelliğine "active" sınıfını vererek, aktif bağlantı farklı bir renkte gösterilebilir. Bu sayede kullanıcılar, gezdikleri sayfaları vurgulayarak kolayca takip edebilirler.

Aşağıdaki örnek, ana menüdaki "Hakkımızda" bağlantısına "active" sınıfı ekleyerek, sayfanın altındaki ikincil menüde farklı bir şekilde görünmesini sağlamak için bir kod parçası göstermektedir:

```import React from 'react';import { NavLink } from 'react-router-dom';

const MainNav = () => { return (

export default MainNav;```

Yukarıdaki örnekte, aktif olan sayfanın bağlantısında "active" sınıf adının kullanıldığı görülebilir. Bu özelliğin kullanımı, özellikle birden fazla sayfadan oluşan web uygulamaları için oldukça önemlidir.

Basit NavLink Örneği

NavLink, React Router kütüphanesinde kullanılan bir bileşendir. Link bileşeninin yerini alır ve aktif olan bağlantıyı belirler. NavLink bileşeninin kullanımı oldukça basittir. Öncelikle import edilir ve ardından kullanılabilir.

NavLink bileşenini özellikle menülerde kullanmak oldukça yaygındır. Bu bileşenin kullanımı ile aktif olan bağlantılar farklı bir şekilde stilendirilebilir ve kullanıcının nerede olduğu daha net bir şekilde anlaşılabilir.

NavLink bileşeninin temel kullanımı şu şekildedir:

{`Hakkımızda`}

{`Anasayfa`}

{`İletişim`}

{`Blog`}

Burada to özelliği, gidilecek URL'yi belirler. Exact özelliği ise tam eşleşme kontrolü yapar. Eğer aktif olan bağlantı tam eşleşme halinde değilse bu özellik kullanılır. activeClassName ve activeStyle özellikleri ise aktif olan bağlantıya özel bir CSS sınıfı veya stil atar.

Ayrıca NavLink bileşenleri iç içe kullanılabilir. Bu durumda, her bir bağlantıya kendi özel özellikleri atanabilir. Örnek kodlar ve açıklamalar ile NavLink kullanımı daha net bir şekilde anlaşılabilir.

React Router Parametreleri

React Router kütüphanesi, sayfa yönlendirmeleri hakkında önemli bir özellik sunmaktadır. Sayfalar arasında geçiş yaparken parametreler kullanarak daha dinamik bir yapıda bağlantı oluşturmak mümkündür. Bu sayede kullanıcılar farklı parametre değerleriyle sayfaları açabilirler.

React Router'da parametreler, URL içindeki değerlerdir. Bu değerlerin adı ve değeri tanımlanabilir. Bu özellik sayesinde kullanıcılar, farklı parametre değerleriyle sayfaları görüntüleyebilirler. Bu da daha dinamik bir kullanıcı deneyimi sağlar.

React Router'da parametreler genellikle Route componenti içinde tanımlanır. Bu sayede belirli bir URL kalıbı parametrelerle eşleştirilir ve her bir parametrenin adı ve anahtar değeri belirtilir. Ayrıca URL içindeki parametrelere de erişmek mümkündür.

Parametreleri kullanarak sayfalar arasında yönlendirme yapmak oldukça kolaydır. Belirli bir parametre değeriyle eşleşen bir URL, yönlendirme yapıldığında otomatik olarak açılır. Bu sayede kullanıcılar farklı parametre değerleriyle sayfaları açabilirler.

React Router'da parametrelerin kullanımı oldukça esnek ve kullanışlıdır. Kullanıcıların farklı değerlerle sayfaları açabilmeleri, kullanıcıların ihtiyaçlarına uygun bir deneyim sunar. Bu nedenle, React Router parametrelerinin doğru kullanımı sayesinde daha iyi bir kullanıcı deneyimi sağlanabilir.

Route Props

React Router, web uygulamalarında URL yönlendirmesi yapmak için kullanılan bir kütüphanedir. Bu kütüphanenin birçok özelliği vardır. Bunlardan biri de Route component'leri tarafından kullanılan props'lardır. Route component'lerinin en önemli özelliği kendilerine verilen URL path ile eşleşirler. Bu eşleşme sonucunda Route component'i, eşleşen URL'ye karşılık gelen başka bir component'i render eder.

Props, React Router içinde farklı verilere erişmek için kullanılır. Örneğin URL parametreleri almak istediğimizde, Route component'i bize match props'unu verir. Bu props, URL parametrelerine erişimimizi sağlar. Location props'u, kullanıcının bulunduğu sayfanın bilgilerini sağlar. Bu bilgileri kullanarak, farklı sayfalara yönlendirme yapabiliriz.

Ayrıca, Route component'inin bir başka özelliği de history'dir. History, kullanıcının tarayıcısında geri veya ileri tuşlarını kullanarak önceki sayfalara veya sonraki sayfalara hareket edebileceği özelliğidir. Bunun yanı sıra, Route component'i altında tanımlanan bir başka component de match, location ve history özelliklerine erişebilir.

Bu yararlı props'lar sayesinde React Router, web uygulamaları için tam ve dinamik bir URL yönlendirme sistemi sağlar.

Parametre Yönlendirme

React Router ile yapılan yönlendirme işlemleri, URL'lerde yer alan parametreler kullanılarak daha dinamik hale getirilebilir. Örneğin, bir kullanıcının profil sayfasına gitmek istediğini düşünelim. Kullanıcının profil sayfası, '/users/:id' şeklinde bir URL yapısına sahip olabilir. Burada ':id' parametresi, hangi kullanıcının profiline gidileceğini belirler.

React Router'da parametre yapısı, Route componenti içinde tanımlanır. Parametre isimleri, ':' işareti ile başlayarak yazılır ve bu şekilde URL'de yer alan değerler, Route componentine aktarılır.

Aşağıdaki örnek kodda '/users/:id' yapısındaki parametrenin kullanımına ilişkin bir örnek verilmiştir.

import React from 'react';import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const users = [  { id: 1, name: 'Ali' },  { id: 2, name: 'Ahmet' },  { id: 3, name: 'Mehmet' }]
const User = ({ match }) => {  const user = users.find(user => user.id === parseInt(match.params.id))  return (    <div>      <h1>{user.name}</h1>    </div>  )}
const App = () => {  return (    <Router>      <ul>        <li>          <Link to='/users/1'>Ali</Link>        </li>        <li>          <Link to='/users/2'>Ahmet</Link>        </li>        <li>          <Link to='/users/3'>Mehmet</Link>        </li>      </ul>      <hr />      <Route path="/users/:id" component={User} />    </Router>  )}
export default App;

Yukarıdaki örnekte, '/users/:id' URL yapısına sahip olan User componenti, Route componentinde tanımlanır. Parametre ismi, ':id' olarak belirlenir. User componentine bu parametre, match.params.id ile aktarılır. Bu şekilde, kullanıcının ID'si belirlenmiş olur ve User componentinde gerekli işlemler gerçekleştirilir.

Parametre yönlendirme işlemi, kullanıcıların belirli parametreler kullanarak farklı sayfalara yönlendirilmesini sağlar. Yukarıdaki örnekte, kullanıcılar belirli bir kullanıcının profiline gitmek istediklerinde, '/users/:id' URL yapısını kullanarak doğrudan o kullanıcının profil sayfasına yönlendirilebilirler. Bu sayede, React Router kullanarak basit bir parametre yönlendirme özelliği oluşturulabilir.

Nesten Routes

React Router, birden fazla sayfaya sahip web uygulamaları geliştirmek isteyenler için birçok farklı özellik sunar. Bunlardan biri de iç içe geçmiş bağlantılar oluşturmaktır. İç içe geçmiş bağlantıları yönetmek için öncelikle Router ve Switch bileşenlerini birleştirmeniz gerekmektedir.

Eğer bir bileşen içerisinde birden fazla bağlantı kullanmanız gerekiyorsa, bu kez yukarıdaki yöntem yetersiz kalacaktır. Bunun yerine Route bileşenlerini iç içe geçerek kullanabilirsiniz. Böylece, farklı bileşenlerin farklı sayfalara sahip olabileceği bir uygulama geliştirebilirsiniz.

Bu amaçla, exact özelliği ile belirli bir URL yolunun tam olarak eşleşmesini sağlayabilirsiniz. Ayrıca, render props özelliği ile kullanıcıya farklı bir bileşen sunabilir ve onu yönlendirebilirsiniz. Son olarak, component özelliği ile hangi bileşenin yükleneceğine karar vermeniz gerekmektedir.

Birlikte kullanıldığında, bu özellikler sayesinde iç içe geçen bileşenlerinizi yönetebilirsiniz. Unutmayın, her zaman uygun şekilde Route bileşenlerini kullanarak, birden fazla sayfayı ve bağlantıyı yönetebilirsiniz.

Yer Tutucu Düzenleme

React Router kullanılarak web sayfalarında url yönetimi kolay bir şekilde gerçekleştirilebilir. Ancak, sayfaları dinamik hale getirmek istediğimizde bazı zorluklarla karşılaşabiliriz. Yer tutucularla iç içe geçen bağlantılar bunlardan biridir. Yer tutucular, URL içinde belirli bir parametreyi değiştirmeden farklı içerikleri görüntülememizi sağlar. Bu durumda, yer tutucularla ilgili özel düzenlemeler yapmamız gerekebilir.

Öncelikle, her yer tutucusuna özel bir url oluşturmayı unutmayın. Aksi takdirde, yönlendirme işlemi doğru şekilde gerçekleşmeyebilir. İç içe geçmiş bağlantılar için değişkenlerin uyumlu olması gerekmektedir. Yani, bir yolu değiştirdiğinizde, tüm bağlantılar otomatik olarak güncellenir.

Yukarıdaki tabloda yer tutucular ve kullanım alanları örnekleriyle açıklanmaktadır. Özellikle, parametreli yönlendirmelerde, yer tutucuların semantik olarak doğru olması önemlidir. Ayrıca, yer tutucuları kullanırken her zaman bir özellik belirtin. Örneğin, kullanıcı adları veya öğe kimlikleri gibi.

İç içe geçmiş bağlantılar için, yönlendirme işlemlerinin doğru olması gerekmektedir. Bu nedenle, her bir bağlantının benzersiz bir URL'si olmalıdır. Bu sayede, yönlendirmelerin doğru şekilde gerçekleştiğinden emin olabilirsiniz. Ayrıca, bağlantıların uyumlu olması için mevcut parametreleri dikkate almanız gerekmektedir.

• Öncelikle, yer tutucularını doğru şekilde yapılandırın ve her bir bağlantı için benzersiz bir URL belirleyin.
• Her bir bağlantının özelliklerini dikkate alarak yönlendirme işlemlerini gerçekleştirin.
• Yer tutucu içeren bağlantılar için özel düzenlemeler yapılması gerekebilir.
• Bağlantıların iç içe geçmesi durumunda, özel ve uyumlu yönlendirme işlemleri gerçekleştirin.