React Router, tek sayfa uygulamalarının yönetimi için kullanılan bir kütüphanedir Sayfalar arası gezinme işlemleri Router, Link ve Route kavramları ile yapılır Bu kütüphane, web geliştiricilerin en çok tercih ettiği kütüphaneler arasındadır Ayrıca, SEO dostu olması sayesinde web sitelerinin Google gibi arama motorlarında daha kolay bulunması mümkündür Proje oluşturmak için create-react-app kullanabilir ve React Router'ı npm install react-router-dom komutuyla yükleyebilirsiniz React Router kullanarak, tüm sayfa içeriğini tek bir HTML dosyasında tutarak sayfalar arasında geçiş yapabilirsiniz

React Router, tek sayfa uygulamalarının yönetimi için kullanılan bir kütüphanedir. Bu kütüphane sayesinde web sayfaları arasında gezinme işlemleri rahatlıkla gerçekleştirilebilir. React Router ile anasayfaya ve alt sayfalara yönelik yönetim işlemleri oldukça basit ve hızlı bir şekilde gerçekleştirilebilir. Anasayfa ve alt sayfalar arası yönetim işlemleri, Router, Link ve Route kavramları ile yapılır. Bu kavramlar sayesinde, kullanıcının web sayfasındaki farklı alanlara iletişim kurması ve farklı sayfalara geçiş yapması mümkündür. React Router ile yapılan sayfa yönetimi işlemleri oldukça kolay olduğu için web geliştiricilerin en çok tercih ettiği kütüphaneler arasında yer alır. Ayrıca, React Router kütüphanesi SEO dostu olduğu için web sitelerinin Google gibi arama motorlarında daha kolay bir şekilde bulunması ve hitap etmesi mümkündür.

React Router Nedir?

React Router, React uygulamalarında tek sayfa uygulamalarının (SPA) yönetimi için kullanılan bir kütüphanedir. Normalde çok sayfalı web sitelerinde her bir sayfa için farklı bir URL oluşturulur ve URL'ler arasında geçiş yapılır. Ancak SPA'lar, tüm sayfa içeriğini tek bir HTML dosyasında tutar ve sayfalar arasında geçiş yapılırken sayfanın yeniden yüklenmesine gerek kalmaz.

React Router, web uygulamalarının sayfalar arasında gezinmesini yönetmek için birden fazla bileşeni kullanır. Bu bileşenler birbirleriyle etkileşim halindedir ve URL'ler arasında geçiş yapmak için kullanılır. React Router'ın en büyük avantajı, sayfaların URL'sine göre yönetilebilmesidir. Böylece kullanıcıların sayfaların URL'sini değiştirse bile uygulama otomatik olarak hangi sayfanın yükleneceğini bilecektir.

Proje Oluşturma ve React Router Kurulumu

React Router kullanarak web sayfalarında gezinme yapabilmeniz için öncelikle bir proje oluşturmanız gerekiyor. Proje oluşturmak için create-react-app kullanabilirsiniz. Bu işlem için terminalde npx create-react-app proje-adi yazarak proje oluşturabilirsiniz.

Ardından React Router'ın kurulumunu yapmalısınız. Bunun için npm install react-router-dom komutunu kullanabilirsiniz. Bu komut sayesinde gerekli dosyalar indirilir ve React Router kullanmaya hazır hale gelirsiniz.

Proje Oluşturma

React Router kullanarak web sayfalarında gezinme konusunda bilgi sahibi olmak istiyorsanız öncelikle bir React projesi oluşturmanız gerekiyor. Bu işlem için create-react-app kullanabilirsiniz. Terminalde "npx create-react-app proje-adi" yazarak proje oluşturabilirsiniz. Daha sonra, React Router'ı projenize eklemek için "npm install react-router-dom" komutunu kullanabilirsiniz. Bu adımların ardından React Router'ı kullanmaya başlayabilirsiniz.

create-react-app:

React ile projeler oluşturmak için kullanabileceğimiz bir uygulamadır. create-react-app'i kullanarak, başlangıç seviyesindeki bir kullanıcı bile, karmaşık yapıda uygulamalar oluşturabilir. Bu uygulama, tüm React bağımlılıklarını içerir ve React projesi oluşturmak için gereken tüm yapılandırma adımlarını açıkça gösterir. Proje oluşturduktan sonra, sadece kodlamaya başlayabilirsiniz.

Bir projeyi oluşturmak için, terminalde npx create-react-app proje-adi komutunu kullanmanız yeterlidir. Bu komut, proje adındaki klasörü oluşturacak ve gerekli tüm paketleri yükleyecektir. Proje klasörü oluşturulduktan sonra, projeye npm start komutu ile başlayabilirsiniz.

React projeleri için yeni bir proje oluşturmak istiyorsanız, create-react-app terminal komutunu kullanarak hızlı ve kolay bir şekilde oluşturabilirsiniz. Terminal penceresinde "npx create-react-app proje-adi" komutunu yazarak yeni bir projenin oluşturabilirsiniz. Bu komut, proje adını belirtmeniz gereken bir parametre ile birlikte çalışır.

Bu işlem tamamlandıktan sonra, React Router'ı projenize eklemek için Terminal penceresinde "npm install react-router-dom" komutunu kullanabilirsiniz. Bu komut, projenize React Router kütüphanesini ekleyecektir.

React Router kullanarak anasayfa ve alt sayfaların yönetimi için öncelikle bir proje oluşturulması gereklidir. Bu işlem için create-react-app kullanılmaktadır. Terminalde npx create-react-app proje-adi komutu çalıştırılarak proje adı belirlenir ve proje oluşturulur. Bu işlem sonucunda oluşan dosya yapısı aşağıdaki gibidir:

• src klasörü: Uygulamamızın kaynak kodlarının bulunduğu klasördür. Bu klasördeki dosyaların içeriği değiştirilir ve uygulamanın davranışları şekillendirilir.
• public klasörü: Bu klasör, uygulamanın statik dosyalarını barındırdığı klasördür. Bu klasördeki index.html dosyası uygulamanın giriş sayfasıdır.
• package.json dosyası: Bu dosya, uygulamamızın paket yöneticisi olan npm tarafından kullanılmaktadır. Projede kullanılan kütüphaneler burada yönetilir.
• node_modules klasörü: Projede kullanılan kütüphaneler bu klasörde yer alır.

Proje oluşturmak için create-react-app kullanılır. Terminalde `npx create-react-app proje-adi` yazılarak proje oluşturulur. Projede kullanılacak olan React Router kütüphanesi ise npm ile kurulur. Terminalde `npm install react-router-dom` yazılarak kurulum gerçekleştirilir. Bu işlemlerin ardından proje oluşturma ve React Router kurulumu tamamlanmış olur. Artık React Router kullanarak web sayfalarımızda gezinme işlemlerini gerçekleştirebiliriz.

React Router Kurulumu

npm install react-router-dom kullanılır. Bu kurulum, React Router'ın kullanıma hazır hale getirilmesini sağlar. Kurulum tamamlandığında, Router, Route ve Link gibi öğelerin kullanımı mümkün olacaktır. React Router'ı kullanmak için ayrıca bir dizi dosyayı projeye dahil etmek gerekiyor. Bu dosyalar, Router, Route ve Link öğeleri gibi çeşitli özellikler sunar. Ayrıca, proje başlatıldığında tüm bileşenlerin veya sayfaların dahil edildiği ana dosya olan index.js içinde de birkaç değişiklik yapılması gerekiyor. Böylece, sayfa yönlendirmeleri ve navigasyonlar başarılı bir şekilde gerçekleştirilebilir.

React Router kullanımı için öncelikle react-router-dom kütüphanesinin kurulu olması gerekiyor. Bunun için npm install react-router-dom komutu kullanılır. Bu komut, projenin bağımlılıklarına react-router-dom kütüphanesini ekler.

Sonrasında, projede import edilerek kullanılabilir. Kurulum işleminden sonra, React Router kullanmaya başlayabilirsiniz.

React Router, SPA’lar için yönetimini sağlayan en önemli kütüphanelerden biridir. React ile birlikte kullanılabilen bu kütüphane sayesinde web sayfası gezinmesi daha kolay ve sürdürülebilir hale gelir. Projenin oluşturulup kurulumunun tamamlanmasının ardından React Router kullanılmaya başlanır. Router, sayfa yönlendirmelerinin kontrolünü sağlamak amacıyla kullanılır. Link işlevi ise gezinme bağlantılarının oluşturulması için gereklidir. Sayfa yönlendirmelerinde ise Route modülü kullanılır. Ayrıca URL parametreleri, sayfalar arası yönlendirmede kullanılabilecek önemli bir araçtır. Projenin tamamlanması ve küçük bir düzenlemenin ardından projenin deploy edilmesi gereklidir. Bunun için de Netlify tercih edilebilir.

React Router Kullanımı

React Router kullanımı oldukça basittir. Router, Link ve Route bileşenleri kullanarak anasayfa ve alt sayfaların yönetimi sağlanır. Router bileşeni, URL ile eşleşen bir Route bileşenini eşleştirmek için kullanılır. Link bileşeni ise, tıklanan URL'yi React Router'a yönlendirir ve eşleşen Route bileşeninin render edilmesini sağlar.

Route bileşeni, URL'leri Routing'den başka yerde kullanma olasılığı sunar. Route bileşeni içinde bir bileşen veya bir fonksiyon render edilebilir. Başka yerde kullanmadan önce, URL'leri eşleştiren Route bileşenleri tanımlanmalıdır.

React Router kullanımı ile ilgili örnek kodlar şu şekildedir:

Örnek kod:```import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() { return (

Örnek kod:```import { Link } from 'react-router-dom';

function Navigation() { return (

Örnek kod:```import { Route } from 'react-router-dom';

function App() { return (

React Router kullanımı oldukça esnektir ve URL parametreleri, yönlendirme, derin bağlantılar gibi farklı senaryolara uyarlanabilir.

Router

Router, React uygulamasını tek sayfalı hale getiren yapı taşlarından biridir. İçinde birçok farklı özellik barındırır. Router, React Router'da temel bir yapı taşıdır ve uygulamaya dahil edilir. Bunun için react-router-dom kütüphanesi kullanılır. Router içinde diğer tüm bileşenler yer alır ve uygulamanın nereye hangi bileşene yönlendireceğini söyler. Router ile genel olarak iki şey yapılır: uygulama içinde gezinmek için bir yapı sağlamak ve sayfa yenilemeden sayfa içindeki geçişler için bir alan oluşturmak. Router, URL'ler ile ilişkilendirilen bileşenleri belirlemek için kullanılır. Ayrıca Router ile uygulama içinde URL'lere göre farklı sayfalar oluşturulabilir.

Router bileşeni, Route bileşenleri içinde yer alır. Route bileşeni, URL'ye göre hangi bileşenin görüntüleneceğini belirlemek için kullanılır. Route bileşenleri, Router bileşeninin alt bileşenleri olarak kullanılır. Router bileşenine Route bileşenleri eklenerek, URL'ler ile ilişkilendirilen bileşenler belirlenir. Bu sayede URL'ler daha okunaklı bir hale getirilir ve kullanıcılar uygulama içinde daha kolayca gezinebilir.

Router bileşeninin içindeki en önemli özellik Switch yapısıdır. Switch, herhangi bir sayfa ile eşleşene kadar Route bileşenleri arasında bir arama yapar. Eşleşen sayfayı bulduktan sonra ilgili bileşeni gösterir. Eğer Switch yapısı kullanılmazsa, başka bir bileşenin de varsa her zaman ilk Route bileşeni gösterilir. Bu, yanıltıcı bir durum yaratabilir. Switch yapısı, eşleşen bileşenleri aramak için kullanılır. Sayfa böylece daha doğru bir şekilde yönlendirilir.

Router bileşeni, genellikle src klasöründe bulunan Route bileşenleri ile birlikte kullanılır. Route, Router içinde belirli bir URL'ye sahip olan bileşenleri tanımlamak için kullanılır. Route yapısı, "path" özelliği ile URL belirler ve "component" özelliği ile de o URL için oluşturulacak bileşeni tanımlar. Bu sayede URL'ler arasında geçiş yaparken, ilgili bileşenler arasında geçiş yapılır ve sayfalar daha akıcı bir şekilde geçiş yapar.

Router, React uygulamalarında yer alan ana sayfa ve alt sayfaların yönetimi için kullanılan önemli bir parçadır. Router, uygulamanın belirli bir sayfaya yönlendirilmesini sağlar ve bu sayede kullanıcının istediği sayfaya kolaylıkla erişebilmesini sağlar. React Router, bu yönetimin daha kolay olmasını sağlayan bir kütüphanedir. Bu kütüphane, uygulamanın URL'sine bağlı olarak belirli bir komponentin yüklendiğinden emin olur. Router ile bir sayfa yüklendiğinde şekillenmesi gereken bileşenleri belirleyebilir ve uygun şekilde yönlendirebiliriz.

Router, React uygulamalarında SPA'ların yönetimi için kullanılan bir kütüphanedir. Routing sistemi, sayfa yenilemesi olmadan içerik değişikliği yapmanızı sağlar. React Router, sayfaları yüklemede kullanabileceğiniz birçok bileşeni içerir. Bu bileşenler, kullanıcıların bir sayfadan diğerine geçmelerini kolaylaştırır.

Router'ı kullanmak için öncelikle BrowserRouter bileşenini uygulamanıza dahil etmelisiniz. Ardından, Route bileşeni ile sayfalar arasındaki rotaları belirleyebilirsiniz. Link bileşeni ise sayfalar arasında gezinmek için kullanılır.

Örneğin, Router bileşeni şu şekilde kullanılabilir:

{`import { BrowserRouter as Router } from 'react-router-dom';ReactDOM.render(        ,  document.getElementById('root'));`}

Bu kodda, Router bileşeni, App bileşenini sarmalarak uygulamanın rotasını kontrol eder.

Route bileşeni, URL ile eşleşen bir bileşene ne zaman render edileceğini söyler. Örneğin, aşağıdaki kodu kullanarak "/about" yolunu eşleştirebilirsiniz:

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

Bu kodda, "path" özelliği "/about" olan Route bileşeni, About bileşenini yükler.

Link bileşeni, kullanıcıların sayfalar arasında gezinmesini sağlar. Örneğin, aşağıdaki kodda "/about" yoluna yönlendiren bir link oluşturulabilir:

{`import { Link } from 'react-router-dom';function Header() {  return (    
          
  );}`}

Bu kodda, "to" özelliği "/about" olan Link bileşeni, kullanıcının "/about" yoluna gitmesini sağlar.

Örnek Kod

React Router kullanımı, birçok farklı senaryo için gösterilebilir. Aşağıdaki örnek kod parçaları ile Router, Link, ve Route nasıl kullanılacağı örnekleri sunulmuştur:

import React from 'react';import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';import About from './pages/About';import Contact from './pages/Contact';
const App = () => {  return (    <Router>      <Switch>        <Route path="/" exact component={Home} />        <Route path="/about" component={About} />        <Route path="/contact" component={Contact} />      </Switch>    </Router>  );}
export default App;

Yukarıdaki kod parçasında `BrowserRouter` komponenti kullanılarak Router componenti oluşturulur. `Switch` komponenti, URL path'ine göre eşleşen komponentleri render etmek için kullanılır. `Route` componentleri, path prop'una göre belirtilen URL path'leri ile ilgili componentleri render eder.

import React from 'react';import { Link } from 'react-router-dom';
const Nav = () => {  return (    <nav>      <ul>        <li>          <Link to="/">Home</Link>        </li>        <li>          <Link to="/about">About</Link>        </li>        <li>          <Link to="/contact">Contact</Link>        </li>      </ul>    </nav>  );}
export default Nav;

Yukarıdaki kod parçasında `Link` componenti kullanılarak navigation menu oluşturulur. `to` prop'u kullanılarak belirtilen URL path'lere yönlendirme yapılır.

import React from 'react';import { Route } from 'react-router-dom';
import Home from './pages/Home';
const App = () => {  return (    <Route path="/" exact component={Home} />  );}
export default App;

Yukarıdaki kod parçasında sadece bir `Route` componenti kullanılmıştır. `exact` prop'u kullanılarak, anasayfa için sadece `/` path'ine eşleştirme yapılır. `component` prop'u ile de hangi componentin render edileceği belirtilir.

Router kullanarak web sayfalarında gezinme işlemleri oldukça kolay hale gelir. React uygulamalarında SPA'ların (tek sayfa uygulamalarının) yönetimi için kullanılan bu kütüphane, web sayfalarının anasayfa ve alt sayfalarının kontrol edilmesine olanak tanır. Router sayesinde sayfalar arasında gezinmek, URL parametreleri yoluyla veriler aktarmak ve sayfalar arasında yönlendirmeler yapmak mümkündür.

Öncelikle Router bileşeninin ne olduğunu ve nasıl kullanıldığını öğrenmek gerekir. Router, 'react-router-dom' kütüphanesinde bulunan bir bileşendir. Router bileşeni ebeveyn bileşen olarak kullanılır ve alt bileşenleri için bir temel sağlar. Router bileşeninin içinde tüm alt bileşenler bulunmalıdır. Bu alt bileşenler sayfa yönlendirmeleri, linkler ve path türleri gibi özellikleri içerir.

React Router kütüphanesi kurulduktan sonra Router kullanabilmek için 'BrowserRouter' veya 'HashRouter' kullanılarak bir Router bileşeni oluşturulur. 'BrowserRouter', web sunucusunun URL'sini kullanarak yönlendirme işlemleri yürütür. 'HashRouter' ise URL yapısını değiştirmeden yönlendirme işlemleri yapar. Ayrıca Router bileşeni içinde tüm diğer React Router bileşenleri ile çalışabilirsiniz.

Router kullanmak için ayrıca URL'lere bir gösterici veya patern tanımlamanız gerekir. 'Switch' bileşeni içinde birden fazla 'Route' bileşeni bulunabilir ve bu bileşenler URL'leri kontrol eder. 'Route' bileşenleri, URL için belirli bir deseni tanımlayarak, o URL'e karşılık gelen bir bileşen gösterir. Bu sayede, örneğin /anasayfa URL'si girildiğinde anasayfa bileşeni gösterilir.

React Router kütüphanesi, web sayfalarının yönetimi açısından oldukça yararlıdır. Router bileşenleri sayesinde anasayfa ve alt sayfaların yönetimi kolaylaşırken, path tanımlamaları da web sayfasının yapısını belirlemek açısından önemlidir. Sayfalar arası yönlendirme, link oluşturma gibi işlemler de Router bileşenleri ile kolaylıkla yapılabilir.

React Router kullanımı incelemesi sırasında, Router, Link ve Route gibi komponentlerin kod içinde nasıl kullanılacağına dikkat edilmelidir. Aşağıdaki örnek kod parçası, React Router'ın temel yapılarını kullanarak birkaç sayfadan oluşan bir uygulama oluşturur.

import React from 'react';import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';function Anasayfa() {  return ;}function Hakkimizda() {  return ;}function Urunler() {  return ;}function App() {  return (          
                
                                                                                                                      
      );}export default App;

Bu örnek kod parçası, Router ile sayfalar arasındaki geçişleri kontrol eder, Link ile farklı sayfalar için yönlendirme linkleri oluşturur ve Route ile URL yolunu belirterek ilgili sayfa bileşenlerini eşleştirir.

Link

bileşeni, birinci sınıf bir bağlantı bileşenidir. Gezinme fikri, algısal bir bağlantıyı tıkladığınızda sayfa yeniden yükleme işlemi yapmadan sayfanın farklı bir bölümüne yönlendirilmesine dayanır. Bu, uygulamanın performansını artırır ve sayfalar arasında daha hızlı geçiş sağlar.

Örneğin, ana sayfadaki menünüzdeki bir bağlantıya tıkladığınızda, bir alt sayfaya yönlenirsiniz. Bu tıklama sayesinde bir istek atılır ve bir sayfa yeniden yüklenir. (Link) bileşeni, sayfalar arasında gezinme işlemi yaparken herhangi bir sayfanın yeniden yüklenmesine gerek kalmadan süreci kolaylaştırır.

bileşeni, gezmeyi sağlayan en önemli bileşenlerden biridir. Örneğin; bir markanın ürünlerini listeleyen sayfası için birçok ürün bağlantısı vardır. Bu ürünlere tıkladığınızda sayfa yeniden yüklenir ve yeni bir sayfada o ürün hakkında bilgi alırsınız. bileşeni kullanarak bu sorunu ortadan kaldırabilirsiniz.

Bir bileşeni oluşturmak için, bileşenin içine yazıda yer alan bağlantı metnini yazmanız gerekir. Ardından, yazının hangi sayfaya yönlendireceğini belirtmeniz gerekiyor. Bu örnekte, bileşenin "to" özelliği kullanılır. Bu özellik, bağlantının hangi URL'ye yönlendirileceğini belirtir.

Link, React Router'da belirli URL'lere yönlendirebilmek için kullanılan bir yapıdır. Bu yapı, basit bir HTML bağlantısı gibi davranır ve tıkladığınızda belirli bir URL'ye yönlendirir.

Link kullanmanın en kolay yolu, bir JSX kodu içinde açıkça tanımlamaktır. Bu şekilde, kullanıcının tıkladığı veri yolunu kaçırmaması ve hedef sayfayı bulması garanti edilir.

Örnek olarak, Link kullanarak ana sayfada bir menü oluşturabilirsiniz. Bu menü, kullanıcının farklı alt sayfalara yönlendirilmesini sağlar. Bu menü, aşağıdaki gibi bir örnekle oluşturulabilir:

```html// import işlemleri ve Router oluşturmaimport { Link } from 'react-router-dom';... render() { return (

Bu şekilde, tıklandığında kullanıcının belirtilen URL'lere yönlendirildiği, basit bir menü oluşturulabilir. Link'in farklı özellikleri de vardır, ancak bu özellikleri kullanarak daha karmaşık işlemler de gerçekleştirebilirsiniz.

React Router'da en önemli bileşenlerden biri, Router bileşenidir. Router, uygulamanın navigasyonunu kontrol eder ve hangi bileşenin hangi URL yoluna eşleştiğini belirler. Yani, uygulamanın ana component'ıdır demek yanlış olmaz. Router'ın history ve location adında iki önemli özelliği vardır. history, uygulamanın önceki ve sonraki durumlarına ilişkin tüm bilgileri içeren bir dizi yönlendirme geçmişi bilgisini içerir.location, uygulamanın konumunu, mevcut yer adresini vb. verileri içerir.

Örnek Kod

React Router'ı kullanarak nasıl web sayfaları yönetebileceğinizi görebilirsiniz. Router, Link ve Route bileşenleri bu işlemde anahtar bileşenlerdir. Aşağıda örnek kod parçaları ile bu bileşenlerin nasıl kullanılacağını açıklayacağız.

Router bileşeni, sayfalar arasında yönlendirme yapmak için kullanılır. BrowserRouter ve HashRouter router tipleri bulunmaktadır. BrowserRouter, web sunucunuz URL'lerde ölçeklenebilirlik sağlar, HashRouter ise statik bir sunucu kurulumunuz varsa daha uygun olabilir.

Örnek kod parçası:

```import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() { return (

Yukarıdaki örnekte, ve bileşenleri kullanarak web sayfaları arasında yönlendirme yapılır. Route bileşeni, hangi bileşenin hangi URL adresinde görüneceğini belirlemek için kullanılır.

Link bileşeni, web sayfaları arasında gezinti yapmak için kullanılır. Link bileşenine basıldığında, yeni bir sayfaya yönlendirilirsiniz.

Örnek Kod parçası:

```import { Link } from 'react-router-dom';

function Navigation() { return (

Yukarıdaki örnekte, bileşenleri kullanılarak sayfalar arasında gezinme sağlanır. URL adresi, to=" " özniteliği sayesinde belirlenir.

Route bileşeni, yönlendirilen URL adresinin hangi bileşeni göstermesi gerektiğini belirlemek için kullanılır.

Örnek Kod parçası:

```import { Route, Switch } from 'react-router-dom';

function App() { return ( );}```

Yukarıdaki örnekte, ve bileşenleri kullanılarak sayfalar arasında gezinme sağlanmaktadır. Component özniteliği sayesinde bileşenler belirlenir.

React Router'da, web sayfalarında gezinmek için kullanılan bir diğer öğe, Link bileşenidir. Link, tıklanabilir bir metin veya öğeye karşılık gelir ve yönlendirilecek sayfayı belirtir.

Bir uygulamada, sayfalar arasında geçiş yapmak için genellikle bir menü veya navigasyon çubuğu kullanılır. Bu navigasyon öğelerine tıklandığında Link bileşeni kullanılarak yönlendirilecek sayfa belirlenir. Link bileşeninde, to özelliği belirtilen adrese yönlendirmek için kullanılır.

Örneğin, aşağıdaki kodda, 'Hakkında' metni tıklandığında, '/hakkinda' dizinindeki sayfaya yönlendirilir:

Ayrıca, Link bileşenine CSS sınıfı veya stil özellikleri eklemek için de className veya style özellikleri kullanılabilir. Bu özellikleri kullanarak, navigasyon öğelerini özelleştirmek mümkündür.

Bir uygulama oluşturulduktan sonra, uygulamanın en üst düzeyinde bulunan dosyada Router kullanılarak sayfalar yönlendirilir. Örneğin:

Yukarıdaki örnek kod parçası, anasayfa ve Hakkında sayfası için Route oluşturur. exact anahtar kelimesi ana sayfaya eşleşirken, path anahtar kelimesi yol kullanarak Hakkında sayfasına yönlendirir.

Route

Route, bir URL yolunu ve bu yola karşılık gelen bir bileşeni eşleştirir. Yani, URL yollarını DOM ağacında bulunan bileşenlerle eşleştirmek için kullanılır. React Router'da, Route, bir bileşen, bir path ve birkaç diğer özellik içerir.

Örneğin, kullanıcının /home URL'sine gitmesi gerektiğinde, Route, path özelliğinde /home URL'sini belirtir ve bileşen özelliğinde home bileşenini belirtir.

Route'un en önemli özelliği, path özelliğidir. Bu özellik, Route'un eşleşeceği URL yolu için bir desen belirtir. Bu desen, özel karakterler kullanılarak oluşturulabilir. Örneğin, /users/:id, :id, herhangi bir sayı veya harf grubuna eşleşecek şekilde ayarlanır.

Ayrıca, exact özelliği de kullanılabilir. Bu özellik, yalnızca tam olarak eşleşen URL yolları için bileşenin render edilmesini sağlar. Bu sayede, yanlış yollar için gereksiz renderlamalar önlenebilir.

React Router'da Route kullanımı oldukça kolaydır. Bileşeninizi yazın, path ve exact özelliklerini belirtin ve ardından bileşeni render etmek için JSX kullanın. Ayrıca, Route'un history ve location özellikleri de kullanılabilir.

Özetle, React Router'da Route, URL yollarını bileşenlerle eşleştirmek için kullanılır. Path özelliği, URL yolu için bir desen belirtirken, exact, yalnızca tam olarak eşleşen URL yoları için bileşenin render edilmesini sağlar. React Router'da Route kullanımı oldukça kolaydır ve diğer özellikleri de kullanılabilir.

React Router içinde uygulama sayfalarının yönetimi için kullanılan bir kütüphanedir. Route, kullanıcının girilen URL değiştiğinde sayfanın nasıl görüneceğini belirlememize olanak sağlar. Örneğin, belirli bir URL'in sonunda verilecek parametrelere göre farklı sayfalar açılabilir. Route, path ve component olmak üzere iki ana prop alır. Path, URL adresini ve component ise sayfanın içeriğini belirler.

Aşağıdaki örnek kodda, path kısmı verilen URL, component kısmı ise açılacak sayfanın içeriği belirtilir.

```import React from 'react';import { Route } from 'react-router-dom';import Home from './Home';import About from './About';

const App = () => { return (

export default App;```

Bu örnekte ana sayfa için path kısmına "/" girilirken, about sayfası için path kısmına "/about" girilmiştir. Component kısmında ise hangi sayfanın içeriği gösterileceği belirtilir. Aynı zamanda, exact iki path'in tam olarak eşleşmesini sağlar.

React Router ile Route component'i kullanıldığında, sayfalar arasında kolayca geçiş yapılabilir. Bu, SPA uygulamalarının kullanılabilirliğini büyük ölçüde artırır.

React Router, React uygulamalarında sayfalar ve komponentler arasında geçiş yapmak için kullanılan bir kütüphanedir. Router, history API'si kullanarak URL'leri izleyerek, sayfalar arası gezinti yapar. Router kullanımı için, BrowserRouter veya HashRouter componentleri kullanılır.

BrowserRouter, tarayıcının history API'sini kullanır ve URL'leri güncellerken, HashRouter, tarayıcının hash değiştiricilerini kullanır ve URL'leri günceller. BrowserRouter kullanımı için örnek kod aşağıdaki gibidir:

import React from 'react';import { BrowserRouter as Router, Route } from 'react-router-dom';import Home from './Home';import About from './About';
function App() {  return (    <Router>      <div>        <Route exact path="/" component={Home} />        <Route path="/about" component={About} />      </div>    </Router>  );}
export default App;

HashRouter kullanımı için de benzer şekilde, sadece import kısmında değişiklik yapılması yeterli olacaktır:

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

Örnek Kod

Öncelikle, Router'ın tanımlandığı bir bileşen oluşturulması gerekiyor. Bu bileşen, tüm route yönlendirmeleri için ana bir yapı olacak şekilde tasarlanmıştır. Aşağıdaki örnek kodda, Router bileşeni tanımlanmış ve içine iki adet Route bileşeni eklenmiştir. Bunlar '/', yani ana sayfa için olan Route ve '/about' sayfası için olan Route.

Route Nedir ve Nasıl Kullanılır?

Bir Route, URL'ye göre belirtilen bir bileşeni eşleştirmek için kullanılır. URL'deki değişkenler Route'a aktarılabilir. Böylece, verileri etkin bir şekilde yönetmek için Route kullanılır.

Örnek Kod:

{``}

Bu kod parçasında, URL "/component/123" şeklinde girildiğinde, "id" değişkeni "123" olarak tanımlanarak Component bileşenine aktarılır. Böylece, Route sayesinde bileşenlere aktarılacak veriler dinamik olarak yönetilir.

React Router kullanarak sayfalar arası geçiş yapmak için Router, Link, Route kullanılır. React Router'da Router bir kaynak olarak kabul edilir ve sayfalar arasında gezinme işlemini yönetir. Link etiketi tarayıcıda URL'nin değişmesini sağlar. Bu, tıklamak istediğimiz elementi tanımlamak için Route kullanımını kolaylaştırır.

React Router'ı kullanarak örnek bir kod şöyledir:

URL Parametreleri ile Çalışmak

URL parametreleri, web sayfalarında gösterilen içeriğin belirli alanlarını değiştirmek veya filtrelemek için kullanılan parametrelerdir. Örneğin, bir e-ticaret sitesinde ürünlerin kategorilerine göre filtrelenmesi yapılabilir. Bu filtreleme, URL parametresi kullanılarak yapılabilir.

URL parametreleri, "?" ve "=" sembolleri kullanılarak URL adresinin sonuna eklenir. "?", parametrelerin başlangıcını belirtirken "=" sembolü de parametre adı ile değerini ayırmak için kullanılır. Örnek bir URL parametresi şöyle görünebilir: "www.example.com/arama?q=React". Bu URL parametresi, "arama" kelimesinin yanındaki "q" parametre adını ve "React" kelimesinin ise "q" parametre adına ait değerini temsil eder.

URL parametreleri ile çalışmak için React Router içerisinde bulunan "match" özelliği kullanılır. Bu özelliği kullanarak, URL adresindeki parametre değerlerine erişebiliriz. Örneğin, "match.params" özelliği kullanarak URL parametrelerini alabilir ve uygulama içerisinde kullanabiliriz.

Aşağıdaki örnek kod parçası, URL adresindeki "page" parametresine göre farklı sayfalarda gezinmenizi sağlar.

function Sayfa(props) {  const { page } = props.match.params;  return (    
            
Bu sayfa, URL adresindeki "page" parametresine göre oluşturuldu.
    
  );}

Örnek Kod

URL parametreleri, kullanıcılarımız arasındaki paylaşımı kolaylaştıran, veriyi linklerin içerisine gömme yeteneği olan güçlü bir araçtır. React Router ile birlikte çalışırken, parametrelerin kullanımı oldukça kolay hale gelir.

Parametrelerin kullanımı için, öncelikle kullanılacak komponentin altındaki URL'yi belirlememiz gerekir. Bu, tipik olarak bir Route yapıcısında yapılır. URL'de değiştirilebilen bir parametre kullanmak istediğimiz için, onu belirleyerek parametrenin adını parantez içinde belirtiyoruz. Örneğin: `/users/:userId`

Bu belirtildikten sonra, komponentimiz `props.match` nesnesi aracılığıyla bu parametreye erişebilir. Bu parametre adına göre, yakalama işlemini gerçekleştiririz.

Örnek kodumuz şu şekildedir:

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

const User = ({ match }) => { return (

const App = () => { return (

export default App;```

Yukarıdaki örnek, `/users` sayfasında bir liste gösterir ve her listedeki kullanıcıya tıklanarak, `User` komponenti gösterilir. `User` komponenti, `match.params.userId` kullanarak URL'den kullanıcının kimliğini alır ve kullanıcının adını gösterir.

Bu şekilde, URL parametrelerini kullanarak, kullanıcıların arayüzdeki hareketlerini daha basit ve etkileşimli hale getirebilir ve ayrıca uygulamalarımızın verimliliğini artırabiliriz.

Yönlendirme

React Router ile yapılan web sayfalarında, sayfalar arası yönlendirme oldukça önemlidir. Bu yönlendirme sayesinde kullanıcılar, anasayfadan diğer sayfalara kolayca geçiş yapabilirler. Bunun için React Router içerisinde bulunan yönlendirme modunu kullanmak gerekmektedir.

React Router'da yönlendirme yapabilmek için, öncelikle Link öğesi kullanılır. Bu öğe, navigasyon linkleri için kullanılır ve içerisine yönlendirilecek sayfanın adresi verilir.

Örnek olarak, Link öğesi ile sağlanacak bir yönlendirme şu şekilde yapılabilir:

• Anasayfa
• Hakkımızda
• İletişim

Yukarıdaki örnekte, Link öğeleri ile birlikte "/hakkimizda" ve "/iletisim" sayfalarına yönlendirme yapılırken, anasayfaya yönlendirmek için sadece "/" adresi kullanılmıştır.

Ayrıca, yönlendirilecek sayfanın adresini vermek yerine Route öğesi de kullanılabilir. Bu öğe, sayfanın içeriğini değiştirmeden sadece adresi değiştirir.

Örnek olarak, Route öğesi ile sağlanacak bir yönlendirme şu şekilde yapılabilir:

Yukarıdaki örnekte, "/hakkimizda" adresi ile eşleşen bir Hakkimizda bileşeni gösterilmektedir. Bu sayede kullanıcının /hakkimizda adresine gitmesi durumunda, sadece sayfanın içeriği değil, adresi değişecektir.

React Router ile yapılan yönlendirmeler, kullanıcı deneyimini artırırken aynı zamanda da web sitesinin SEO uyumlu olmasını sağlar. Bu nedenle, sayfalar arası yönlendirme özellikle modern web uygulamalarında oldukça sık kullanılan bir tekniktir.

Örnek Kod

React Router kullanarak sayfalar arası yönlendirme yapmak oldukça kolaydır. Bu işlem için öncelikle Router componenti kullanılarak sayfalar arasında gezinme sağlanır. Ardından, Link componenti ile redirect işlemi gerçekleştirilir ve son olarak Route componenti kullanılarak yönlendirme işlemi tamamlanır.

Aşağıdaki örnek kod parçası ile sayfalar arası yönlendirme işlemi gösterilmiştir:

```javascriptimport React from 'react';import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => (

const About = () => (

const Contact = () => (

const App = () => (

Yukarıdaki örnek kod parçasında, öncelikle Router componenti kullanılarak sayfalar arasında gezinme sağlanmıştır. Daha sonra, Link componenti ile sayfa yönlendirmesi gerçekleştirilmiştir. Son olarak, Route componenti kullanılarak sayfaların yönlendirme işlemi tamamlanmıştır.

Bu şekilde React Router kullanarak anasayfa ve alt sayfaların yönetimini gerçekleştirebilirsiniz. Sayfalar arasındaki gezinme işlemini kolaylaştıran React Router, uygulamanızın kullanıcı deneyimini de arttıracaktır.

Netlify ile Deploy Etmek

React Router kullanarak oluşturduğumuz proje, artık hazır hale geldi. Peki, şimdi bu projeyi dünyaya açmak için ne yapmalı? Cevabı basit: projeyi yayınlamalıyız. Bu adıma da "deploy etmek" denir.

Projenizi Netlify ile deploy etmek oldukça pratiktir ve birkaç adımda tamamlayabilirsiniz. Öncelikle, Netlify hesabınızı oluşturmalısınız. Daha sonra, projenizi GitHub, GitLab veya Bitbucket gibi platformlarla entegre edebilirsiniz. Bu sayede, projenizdeki herhangi bir değişiklik olduğunda, Netlify otomatik olarak projenizi yeniden derler ve deploy eder.

Projeyi Netlify'e yüklemek için, Netlify hesabınıza giriş yapın ve "New site from Git" seçeneğini seçin. Bu adımı tamamladıktan sonra, projenizi bağlayabileceğiniz bir Git tabanı seçmeniz gerekiyor. Projeniz hazır olduğunda, Netlify tarafından otomatik olarak derlenerek yayınlanır.

Projeyi deploy etmek için bir diğer seçenek ise manuel olarak dosyaları sıkıştırmak ve sıkıştırılmış dosyaları FTP aracılığıyla yüklemektir. Ancak, bu yöntem oldukça zaman alıcıdır ve hatalara neden olabilir. Bu nedenle, Netlify kullanarak projeleri deploy etmek daha kolay ve güvenlidir.

Tüm adımları tamamladıktan sonra, artık projenizi dünyaya açabilirsiniz. Tek yapmanız gereken, projenizin URL'sini paylaşmak ve kullanıcılardan gelen geri bildirimleri takip etmek. Başarılı bir deploy etme işleminin ardından, düzenli olarak projenizi güncelleyebilir ve yeni özellikler ekleyebilirsiniz.