{"id":36818,"date":"2025-12-23T14:41:13","date_gmt":"2025-12-23T11:41:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36818"},"modified":"2025-12-23T14:41:13","modified_gmt":"2025-12-23T11:41:13","slug":"react-routerda-rota-haritalandirma-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-routerda-rota-haritalandirma-kapsamli-bir-rehber\/","title":{"rendered":"React Router’da Rota Haritaland\u0131rma: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

React Router’da Rota Haritaland\u0131rma: Kapsaml\u0131 Bir Rehber<\/h2>\n

Giri\u015f<\/h2>\n

Modern web uygulamalar\u0131, \u00f6zellikle Single-Page Application (SPA) mimarisiyle geli\u015ftirilenler, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek i\u00e7in dinamik ve ak\u0131c\u0131 bir navigasyon yap\u0131s\u0131na ihtiya\u00e7 duyar. Kullan\u0131c\u0131lar\u0131n farkl\u0131 sayfalar aras\u0131nda kesintisiz ge\u00e7i\u015f yapabilmesi, URL’nin uygulaman\u0131n mevcut durumunu yans\u0131tmas\u0131 ve taray\u0131c\u0131n\u0131n geri\/ileri butonlar\u0131n\u0131n beklendi\u011fi gibi \u00e7al\u0131\u015fmas\u0131, bir y\u00f6nlendirme (routing) k\u00fct\u00fcphanesinin temel g\u00f6revlerindendir. React ekosisteminde bu ihtiyac\u0131 en g\u00fc\u00e7l\u00fc ve yayg\u0131n \u015fekilde kar\u015f\u0131layan k\u00fct\u00fcphane \u015f\u00fcphesiz React Router’d\u0131r.<\/p>\n

React Router, deklaratif (declarative) bir yakla\u015f\u0131mla, bile\u015fen tabanl\u0131 bir \u015fekilde rotalar\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. Bu sayede, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmlerini URL’lerle e\u015fle\u015ftirmek, dinamik veri y\u00fcklemek, kullan\u0131c\u0131 yetkilendirmesi yapmak ve genel olarak uygulaman\u0131z\u0131n navigasyon ak\u0131\u015f\u0131n\u0131 y\u00f6netmek olduk\u00e7a kolayla\u015f\u0131r. Bu makale, React Router’\u0131n temel kurulumundan ba\u015flayarak, rota tan\u0131mlama, dinamik rotalar, i\u00e7 i\u00e7e rotalar, programatik navigasyon, rota koruma ve geli\u015fmi\u015f yap\u0131land\u0131rmalar gibi konular\u0131 derinlemesine inceleyerek, React Router ile rota haritaland\u0131rma konusunda kapsaml\u0131 bir rehber sunmay\u0131 ama\u00e7lamaktad\u0131r. Hem React Router v5 hem de daha g\u00fcncel ve basitle\u015ftirilmi\u015f v6 versiyonundaki yakla\u015f\u0131mlara de\u011finilerek, aralar\u0131ndaki temel farklar vurgulanacakt\u0131r.<\/p>\n

React Router’a Giri\u015f<\/h2>\n

React Router, bir React uygulamas\u0131nda URL’yi bile\u015fenlerle e\u015fle\u015ftirmek i\u00e7in kullan\u0131lan standart bir k\u00fct\u00fcphanedir. Kullan\u0131c\u0131n\u0131n adres \u00e7ubu\u011funa yazd\u0131\u011f\u0131 URL’ye veya bir ba\u011flant\u0131ya t\u0131klad\u0131\u011f\u0131nda olu\u015fan URL de\u011fi\u015fikli\u011fine g\u00f6re hangi React bile\u015feninin ekranda g\u00f6sterilece\u011fini belirler.<\/p>\n

Temel Konseptler ve Neden React Router?<\/h3>\n

React Router’\u0131n merkezinde birka\u00e7 anahtar bile\u015fen ve konsept bulunur:
\n* Router<\/strong>: Uygulaman\u0131z\u0131n tamam\u0131n\u0131 sarmalayan ve y\u00f6nlendirme ba\u011flam\u0131n\u0131 sa\u011flayan ana bile\u015fendir (\u00f6rne\u011fin BrowserRouter<\/code>).
\n* Route<\/strong>: Belirli bir URL yolunu (path) bir React bile\u015feniyle e\u015fle\u015ftiren bile\u015fendir.
\n* Link \/ NavLink<\/strong>: Kullan\u0131c\u0131lar\u0131n farkl\u0131 rotalar aras\u0131nda gezinmesini sa\u011flayan deklaratif navigasyon bile\u015fenleridir.
\n Routes (v6) \/ Switch (v5)<\/strong>: Tan\u0131mlanm\u0131\u015f Route<\/code> bile\u015fenlerini gruplayarak, mevcut URL ile e\u015fle\u015fen <\/em>ilk* rotay\u0131 render etmeyi sa\u011flayan bile\u015fenlerdir.<\/p>\n

React Router, bile\u015fen tabanl\u0131 yap\u0131s\u0131yla React’\u0131n felsefesine m\u00fckemmel bir \u015fekilde uyar. Deklaratif yap\u0131s\u0131 sayesinde, uygulaman\u0131z\u0131n navigasyonunu “nas\u0131l” yapaca\u011f\u0131n\u0131z\u0131 de\u011fil, “ne” yapaca\u011f\u0131n\u0131z\u0131 tan\u0131mlars\u0131n\u0131z. Bu, kodunuzu daha okunabilir, bak\u0131m\u0131 daha kolay ve hatalara kar\u015f\u0131 daha diren\u00e7li hale getirir.<\/p>\n

Kurulum<\/h3>\n

React Router’\u0131 projenize eklemek i\u00e7in npm<\/code> veya yarn<\/code> kullanabilirsiniz:
\nnpm install react-router-dom<\/code>
\nveya
\nyarn add react-router-dom<\/code><\/p>\n

react-router-dom<\/code> paketi, web uygulamalar\u0131 i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f DOM ba\u011flamalar\u0131n\u0131 (BrowserRouter<\/code>, Link<\/code> vb.) i\u00e7erir.<\/p>\n

Temel Rota Tan\u0131mlama<\/h2>\n

React Router ile rota tan\u0131mlaman\u0131n ilk ad\u0131m\u0131, uygulaman\u0131z\u0131 bir router bile\u015feni ile sarmalamak ve ard\u0131ndan Route<\/code> bile\u015fenlerini kullanarak URL yollar\u0131n\u0131 bile\u015fenlerle e\u015fle\u015ftirmektir.<\/p>\n

Router Bile\u015fenleri<\/h3>\n

React Router iki ana router bile\u015feni sunar:
\n* BrowserRouter<\/code><\/strong>: HTML5 History API’sini kullanarak taray\u0131c\u0131 ge\u00e7mi\u015fini y\u00f6netir. URL’ler normal bir web sitesi gibi g\u00f6r\u00fcn\u00fcr (\u00f6rne\u011fin example.com\/about<\/code>). Genellikle SPA’lar i\u00e7in tercih edilen y\u00f6ntemdir. Sunucunuzun, t\u00fcm istekleri uygulaman\u0131z\u0131n ana HTML dosyas\u0131na y\u00f6nlendirecek \u015fekilde yap\u0131land\u0131r\u0131lmas\u0131 gerekir (client-side routing).
\n* HashRouter<\/code><\/strong>: URL’lerde hash (#<\/code>) kullan\u0131r (\u00f6rne\u011fin example.com\/#\/about<\/code>). Bu, sunucu yap\u0131land\u0131rmas\u0131 gerektirmeyen daha basit bir yakla\u015f\u0131md\u0131r, ancak URL’ler daha az estetik g\u00f6r\u00fcnebilir ve SEO a\u00e7\u0131s\u0131ndan baz\u0131 dezavantajlar\u0131 olabilir.<\/p>\n

\u00c7o\u011fu modern React uygulamas\u0131nda BrowserRouter<\/code> tercih edilir. Uygulaman\u0131z\u0131n ana bile\u015fenini (genellikle App.js<\/code> veya index.js<\/code> i\u00e7indeki App<\/code> bile\u015feni) bir BrowserRouter<\/code> i\u00e7ine alarak y\u00f6nlendirme ba\u011flam\u0131n\u0131 sa\u011flars\u0131n\u0131z:<\/p>\n

import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from '.\/App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \n    \n      \n    <\/BrowserRouter>\n  <\/React.StrictMode>\n);<\/code><\/pre>\n
Route<\/code> Bile\u015feni<\/h3>\n
Route<\/code> bile\u015feni, belirli bir URL yolu ile bir React bile\u015fenini e\u015fle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
*   path<\/code> prop’u<\/strong>: E\u015fle\u015fecek URL yolunu belirtir.
\n*   element<\/code> prop’u (v6)<\/strong>: Yol e\u015fle\u015fti\u011finde render edilecek React bile\u015fenini al\u0131r. v5’te bu prop’lar component<\/code> (bile\u015fenin kendisini al\u0131r) veya render<\/code> (bir fonksiyon al\u0131r ve render edilecek JSX’i d\u00f6nd\u00fcr\u00fcr) idi. v6, bu karma\u015f\u0131kl\u0131\u011f\u0131 ortadan kald\u0131rarak yaln\u0131zca element<\/code> prop’unu kullan\u0131r.<\/p>\n
\u00d6rnek kullan\u0131m:<\/p>\n
\/\/ App.js\nimport React from 'react';\nimport { Routes, Route } from 'react-router-dom';\nimport HomePage from '.\/pages\/HomePage';\nimport AboutPage from '.\/pages\/AboutPage';\nimport ContactPage from '.\/pages\/ContactPage';\n\nfunction App() {\n  return (\n    \n      } \/>\n      } \/>\n      } \/>\n    <\/Routes>\n  );\n}\nexport default App;<\/code><\/pre>\n
Routes<\/code> Bile\u015feni (v6) \/ Switch<\/code> Bile\u015feni (v5)<\/h3>\n
Uygulaman\u0131zda birden fazla Route<\/code> tan\u0131mland\u0131\u011f\u0131nda, mevcut URL ile birden fazla rota e\u015fle\u015febilir. \u00d6rne\u011fin, \/about<\/code> yolu hem path=\"\/\" <\/code> ile hem de path=\"\/about\"<\/code> ile e\u015fle\u015febilir. Bu durumu \u00f6nlemek ve sadece en iyi e\u015fle\u015fen tek bir rotay\u0131<\/em> render etmek i\u00e7in Routes<\/code> (v6) veya Switch<\/code> (v5) bile\u015fenleri kullan\u0131l\u0131r.<\/p>\n
*   Routes<\/code> (v6)<\/strong>: Routes<\/code> bile\u015feni, \u00e7ocuklar\u0131 olarak tan\u0131mlanan t\u00fcm Route<\/code>‘lar\u0131 tarar ve URL ile e\u015fle\u015fen ilk Route<\/code>‘u render eder. v6’da exact<\/code> prop’una art\u0131k ihtiya\u00e7 yoktur; Routes<\/code> varsay\u0131lan olarak en spesifik e\u015fle\u015fmeyi se\u00e7er.
\n*   Switch<\/code> (v5)<\/strong>: Ayn\u0131 i\u015flevi g\u00f6r\u00fcrd\u00fc ancak exact<\/code> prop’u olmadan, \/<\/code> yolu \/about<\/code> yolundan \u00f6nce tan\u0131mlan\u0131rsa, \/about<\/code> yerine \/<\/code> yolunun bile\u015feni render edilirdi. Bu nedenle v5’te exact<\/code> prop’u s\u0131k\u00e7a kullan\u0131l\u0131rd\u0131: <\/code>.<\/p>\n
Routes<\/code> bile\u015feninin kullan\u0131lmas\u0131, uygulaman\u0131z\u0131n navigasyon mant\u0131\u011f\u0131n\u0131 daha \u00f6ng\u00f6r\u00fclebilir ve kontrol edilebilir hale getirir.<\/p>\n
Dinamik Rotlar ve Parametreler<\/h2>\n
\u00c7o\u011fu zaman, bir uygulaman\u0131n ayn\u0131 sayfa d\u00fczenini kullanarak farkl\u0131 i\u00e7erikleri g\u00f6stermesi gerekir. \u00d6rne\u011fin, bir e-ticaret sitesinde her \u00fcr\u00fcn\u00fcn kendi detay sayfas\u0131 vard\u0131r, ancak bu sayfalar\u0131n yap\u0131s\u0131 genellikle ayn\u0131d\u0131r. Bu gibi durumlar i\u00e7in React Router, dinamik rotalar\u0131 ve URL parametrelerini destekler.<\/p>\n
URL Parametreleri<\/h3>\n
URL parametreleri, rotan\u0131n bir par\u00e7as\u0131 olarak de\u011fi\u015fken verileri yakalamak i\u00e7in kullan\u0131l\u0131r. path<\/code> prop’unda iki nokta \u00fcst \u00fcste (:<\/code>) ile belirtilirler.
\n\u00d6rnek: path=\"\/products\/:id\"<\/code> burada :id<\/code> bir parametredir.<\/p>\n
Bu parametrelere, bile\u015fen i\u00e7inde useParams<\/code> hook’u (v6) arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir.<\/p>\n
import React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction ProductDetailPage() {\n  const { id } = useParams(); \/\/ URL'den id parametresini al\u0131r\n  \/\/ id'yi kullanarak \u00fcr\u00fcn verilerini \u00e7ekme veya g\u00f6sterme\n  return (\n    
\n      \n      
\u00dcr\u00fcn ID: {id}<\/p>\n      {\/ \u00dcr\u00fcn bilgilerini burada g\u00f6ster <\/em>\/}\n    <\/div>\n  );\n}\nexport default ProductDetailPage;<\/code><\/pre>\n
E\u011fer URL \/products\/123<\/code> ise, id<\/code> de\u011feri 123<\/code> olacakt\u0131r.<\/p>\n
Query Parametreleri<\/h3>\n
URL parametrelerinden farkl\u0131 olarak, query parametreleri URL’nin sonuna soru i\u015fareti (?<\/code>) ile eklenir ve anahtar-de\u011fer \u00e7iftleri \u015feklinde veri ta\u015f\u0131r (\u00f6rne\u011fin ?category=electronics&sort=price<\/code>). Bunlar genellikle filtreleme, arama veya sayfalama gibi iste\u011fe ba\u011fl\u0131 verileri iletmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
v6’da useSearchParams<\/code> hook’u ile query parametrelerine eri\u015filebilir ve y\u00f6netilebilir:<\/p>\n
import React from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nfunction SearchResultsPage() {\n  const [searchParams, setSearchParams] = useSearchParams();\n  const query = searchParams.get('q'); \/\/ URL'den 'q' parametresini al\u0131r\n  const category = searchParams.get('category');\n\n  \/\/ Arama sonu\u00e7lar\u0131n\u0131 query ve category'ye g\u00f6re g\u00f6sterme\n  return (\n    
\n      \n      
Arama sorgusu: {query || 'Yok'}<\/p>\n      
Kategori: {category || 'T\u00fcm\u00fc'}<\/p>\n