{"id":36386,"date":"2025-12-15T11:41:33","date_gmt":"2025-12-15T08:41:33","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36386"},"modified":"2025-12-15T11:41:33","modified_gmt":"2025-12-15T08:41:33","slug":"react-router-parametreleri-dinamik-yonlendirme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-router-parametreleri-dinamik-yonlendirme-rehberi\/","title":{"rendered":"React Router Parametreleri: Dinamik Y\u00f6nlendirme Rehberi"},"content":{"rendered":"

<\/p>\n

React Router Parametreleri: Dinamik Y\u00f6nlendirme Rehberi<\/h2>\n

React uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve veri odakl\u0131 sayfalar olu\u015fturmak i\u00e7in dinamik y\u00f6nlendirme (routing) hayati \u00f6neme sahiptir. React Router, bu dinamikli\u011fi sa\u011flamak i\u00e7in parametreleri kullan\u0131r. Bu rehberde, React Router parametrelerinin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve uygulamalar\u0131n\u0131zda g\u00fc\u00e7l\u00fc, esnek rotalar olu\u015fturmak i\u00e7in en iyi uygulamalar\u0131 derinlemesine inceleyece\u011fiz.<\/p>\n

Giri\u015f: Dinamik Rotalar\u0131n G\u00fcc\u00fc<\/h3>\n

Modern web uygulamalar\u0131 genellikle ayn\u0131 yap\u0131ya sahip ancak farkl\u0131 i\u00e7eriklere sahip sayfalar bar\u0131nd\u0131r\u0131r. \u00d6rne\u011fin, bir e-ticaret sitesinde binlerce \u00fcr\u00fcn olmas\u0131na ra\u011fmen, her \u00fcr\u00fcn\u00fcn detay sayfas\u0131 ayn\u0131 \u015fablona sahiptir. Bu gibi durumlarda, her \u00fcr\u00fcn i\u00e7in ayr\u0131 bir rota tan\u0131mlamak yerine, tek bir dinamik rota \u015fablonu olu\u015fturup \u00fcr\u00fcn kimli\u011fini (ID) URL \u00fczerinden parametre olarak ge\u00e7irmek \u00e7ok daha verimli ve s\u00fcrd\u00fcr\u00fclebilirdir. React Router parametreleri tam da bu ihtiyac\u0131 kar\u015f\u0131lar: URL’deki de\u011fi\u015fken k\u0131s\u0131mlar\u0131 yakalayarak bile\u015fenlerinize veri aktarman\u0131z\u0131 sa\u011flarlar. Bu sayede, uygulaman\u0131z daha \u00f6l\u00e7eklenebilir, bak\u0131m\u0131 daha kolay ve kullan\u0131c\u0131 dostu hale gelir.<\/p>\n

React Router ve Dinamik Rotalar<\/h3>\n

React Router, uygulaman\u0131z\u0131n farkl\u0131 URL’lere farkl\u0131 bile\u015fenleri render etmesini sa\u011flayan pop\u00fcler bir k\u00fct\u00fcphanedir. Dinamik rotalar olu\u015fturmak i\u00e7in URL \u015fablonlar\u0131nda belirli yer tutucular tan\u0131mlar\u0131z. Bu yer tutuculara “parametre” ad\u0131 verilir.<\/p>\n

React Router’da bir parametre tan\u0131mlamak i\u00e7in rota yolunda iki nokta \u00fcst \u00fcste (:<\/code>) i\u015faretini kullan\u0131r\u0131z. \u00d6rne\u011fin, \/products\/:id<\/code> rotas\u0131, \/products\/123<\/code>, \/products\/abc<\/code> gibi URL’leri e\u015fle\u015ftirecektir. :id<\/code> k\u0131sm\u0131, URL’deki de\u011fi\u015fen de\u011feri yakalayan parametredir.<\/p>\n

Temel bir React Router kurulumu \u015fu \u015fekildedir:<\/p>\n

\/\/ src\/App.js\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\nimport HomePage from '.\/components\/HomePage';\nimport ProductDetail from '.\/components\/ProductDetail';\nimport UserProfile from '.\/components\/UserProfile';\nimport NotFound from '.\/components\/NotFound';\n\nfunction App() {\n  return (\n    \n