React Router ile sayfalar arasında geçiş yaparken, URL parametrelerini kullanarak bilgi aktarımı yapmak mümkündür Bu parametrelere erişmek için kullanabileceğimiz en uygun yöntem ise, React Router'ın sunmuş olduğu useLocation hook'u kullanmaktır Bu hook, React bileşenine entegre edildiğinde bileşenin bulunduğu sayfanın URL bilgilerini içeren bir nesne döndürür Bu sayede, URL'deki parametrelere kolayca erişim sağlanabilir ve uygulamamızı daha dinamik bir hale getirebiliriz Ayrıca, useLocation hook'unun döndürdüğü nesnede yer alan pathname, search, hash ve state özelliklerini kullanarak, URL'deki parametreleri okuyabilir ve kullanabiliriz Özellikle route parametrelerini kullanarak dinamik sayfalar oluşturmak ve veri paylaşımı yapmak için useLocation hook'u oldukça faydalıdır

React Router ile sayfalar arası geçişler yaparken, URL içerisine parametreler ekleyerek başka sayfalara bilgi aktarmak mümkündür. Bu sayede, dinamik uygulamalar oluşturmak veya farklı sayfalar arasında geçiş yapmak kolaylaşır. Ancak, bu parametrelere erişmek için kullanılacak yöntem önemlidir. İşte bu noktada, useLocation hook'u devreye girer.

useLocation hook'u, React Router tarafından sunulan bir özelliktir ve bir bileşen içerisinde kullanıldığında, o sayfanın URL bilgilerini içeren bir nesne döndürür. Bu sayede, route parametrelerine erişim sağlamak oldukça kolaylaşır. Özellikle, URL'deki arama sorgularını veya benzersiz sayfa tanımlayıcıları gibi parametreleri okumak için useLocation hook'u kullanmak son derece faydalıdır.

useLocation Hook'u Nedir?

React Router kullanılırken, web uygulamalarında sayfalar arasında geçiş yapmak için URL'ler kullanılır. useLocation hook'u, React bileşeninde bulunduğumuz sayfanın URL bilgilerini tutan bir nesne döndürür. Bu bilgilere erişerek URL'deki parametreleri okuyabilir ve dinamik bir sayfa oluşturma işlemini kolaylaştırır. Ayrıca URL parametrelerine göre sayfalar arası geçiş yapmak da mümkündür.

useLocation hook'u, URL'nin farklı parçalarını döndürür: **pathname**, **search**, **hash** ve **state**. **pathname**, sayfanın URL'sindeki adres bilgisini tutar. **search**, URL'deki arama sorgusunu ('?' ile başlayan parametreler) tutar. **hash**, sayfanın URL'sindeki hashtag (#) bilgisini tutar. **state** ise, geçmiş sayfadaki erişimizde kullanabileceğimiz opsiyonel bir nesnedir.

useLocation Hook'u Nasıl Kullanılır?

React Router ile sayfalar arası geçişler yaparken, bazen URL'deki parametreleri diğer sayfalara aktarmamız gerekiyor. useLocation hook'u kullanarak bu işlemi kolayca gerçekleştirebiliriz. Ancak önce, bileşenimizde hook'u kullanabilmek için React Router paketini yüklememiz ve kullanacağımız bileşene import etmemiz gerekiyor.

Import işlemi tamamlandıktan sonra, bileşen içerisinde hook'u kullanarak route parametrelerine erişim sağlayabiliriz. useLocation hook'u, bir nesne döndürür ve bu nesne içerisinde sayfanın URL bilgileri tutulur. Bilgiler arasında, sayfanın URL'sindeki adres bilgisi (`pathname`), arama sorgusu (`search`), hashtag (`hash`) ve isteğe bağlı bir nesne olan `state` gibi parametreler bulunur. Bu bilgilere erişerek, dinamik bir sayfa oluşturma veya URL parametrelerine göre sayfalar arası geçiş yapma işlemlerini kolaylaştırabiliriz.

Kodu Görüntüleme

Kodu görüntüleme işlemi için, öncelikle kullanacağımız hook'u ve React Router'ı bileşene import etmeliyiz. Daha sonra, bileşenin içine kodumuzu ekleyebiliriz. Aşağıdaki örnekte, useLocation hook'unu kullanarak URL'deki parametreleri konsola yazdırıyoruz.

```javascriptimport { useLocation } from 'react-router-dom';

function BlogPost() { const location = useLocation(); console.log(location.pathname); // '/blog-post' console.log(location.search); // '?id=123'

return ( // Bileşen içeriği );}```

Yukarıdaki örnekte, `useLocation` hook'unun döndürdüğü nesneden `pathname` ve `search` özelliklerini kullanarak, sayfanın URL'sindeki adres bilgisi ve arama sorgusu bilgisini alabiliyoruz. Bu şekilde, URL'deki parametrelere kolayca erişebiliriz.

Bu kodu daha da geliştirerek, route parametrelerini kullanarak sayfalar arası geçişler yapabilir ve dinamik bir uygulama oluşturabilirsiniz.

import { useLocation } from 'react-router-dom'; React Router paketinde bulunan useLocation hook'unu kullanmak için bu satırı bileşenlerimizin içinde import etmemiz gerekiyor. Bu hook uygulama içerisinde gezinirken kullandığımız sayfaların URL bilgilerini tutan bir nesne döndürür.

Yukarıdaki örnekte görüldüğü gibi, `useLocation` hook'unu kullanarak bileşenimiz içerisinde route parametrelerine erişebiliriz. Bu sayede, URL'deki parametrelere göre farklı sayfalar arasında geçiş yapıp, uygulamamızı daha dinamik hale getirebiliriz.

Ayrıca, bir önceki örnekte blog yazılarının benzer yazılarını listeleme örneğini de inceledik. Bu sayede, bir yazıya ait route parametresini diğer sayfalara da taşıyarak, uygulama içerisinde veri paylaşımı yapmış olduk.

Özet olarak, `useLocation` hook'u sayesinde React Router ile route parametrelerine erişim sağlamak oldukça kolaylaşır. Bu sayede, uygulamamızı daha dinamik ve veri paylaşımı yapabileceğimiz bir hale getirebiliriz.

Bir sayfa içerisinde kullanacağımız route parametrelerine erişmek için, React Router'ın bize sunduğu useLocation hook'unu kullanabiliriz. Bu hook sayesinde, bir sayfanın URL bilgilerini tutan bir nesne elde ederiz. Kısaca, const location = useLocation(); şeklinde bir kullanım işlemlerimizi oldukça kolaylaştıracaktır.

useLocation hook'unun döndürdüğü nesne içerisinde, sayfanın URL'sindeki adres, arama sorgusu, hashtag ve özel bir durum nesnesi yer almaktadır. Bu bilgilere erişmek için location.pathname, location.search, location.hash ve location.state şeklinde bir kullanım yaparak bilgileri okuyabiliriz. Özellikle route parametrelerini kullanırken, bu bilgilere erişerek gerekli işlemleri yapabiliriz.

Ayrıca, useLocation hook'unu kullanarak, yukarıda verdiğimiz örnek senaryoda olduğu gibi, URL'deki parametreler ile dinamik sayfalar oluşturabiliriz. Bu sayede, kullanıcının seçtiği parametrelere göre farklı sayfalar oluşturabilir ve uygulamamızı daha interaktif hale getirebiliriz.

Özetlemek gerekirse, useLocation hook'u React Router'ın sunduğu oldukça önemli bir özelliktir. Bu hook sayesinde, sayfanın URL bilgilerine kolayca erişerek işlemlerimizi gerçekleştirebiliriz. Route parametrelerini kullanarak oluşturacağımız interaktif uygulamalarda, useLocation hook'unu kullanmak oldukça işlevsel olacaktır.

useLocation hook'u, React bileşenlerinde sayfanın URL bilgilerine erişmek için kullanılır. Bu bilgilere erişmek için kullanılan fonksiyonlardan birisi de `pathname`'dir. `pathname`, kullanıcının hangi sayfada olduğunu gösteren URL adres bilgisidir. Örneğin, console.log(location.pathname); // '/blog-post' kullanarak, kullanıcının şu anki sayfadaki URL'sini yazdırabiliriz. Bu sayede, URL'deki parametrelere kolaylıkla erişebilir ve uygulamamızı bu bilgilere göre dinamik olarak ayarlayabiliriz.

console.log(location.search); // '?id=123'

Bu kod satırı, useLocation hook'u ile sayfanın URL'sindeki arama sorgusunu (query string) konsola yazdırır. Bu örnekte, URL'deki query string `?id=123` dir. Bu bilgi, sayfadaki öğelerin veya bileşenlerin belirli bir parametreye göre ayarlanması veya filtrelenmesi için kullanılabilir.

Query string, URL'in sonunda bir soru işareti (?) ve anahtar-değer çiftlerinden oluşur. Anahtar, değer ile eşleşen bir kelime veya kelime öbeği, "=" işareti ile değer ise anahtar ile eşleşen değerdir.

Bir URL'de birden fazla parametre kullanılıyorsa, bu parametreler "&" işareti ile birbirinden ayrılır. UseLocation hook'u ile sayfa bileşeninde URL'deki tüm parametreleri okuyabilir ve gerektiğinde kullanabilirsiniz.

return() fonksiyonu, React bileşenlerinin JSX içerisinde görüntülenmesini sağlayan önemli bir fonksiyondur. Bu fonksiyon, bileşenin render edilmesi gereken JSX kodunu içerir. Ayrıca, bu fonksiyonun içerisinde JSX kodlarını bir araya getirmek için çeşitli HTML etiketleri kullanabiliriz.

Örneğin, bir web sayfasında oluşturduğumuz bir bileşenin görüntülenmesi için return() fonksiyonunu kullanırız. Bu fonksiyonu kullanarak, bileşenin geri döndürülmesi gereken yapılarının JSX şeklinde oluşturulmasını sağlayabiliriz.

return() fonksiyonunda ayrıca bazı Javascript ifadeleri de kullanılabilir. Örneğin, bir dizi oluşturup bu diziyi return() fonksiyonunda kullanabilir ve bu sayede verileri düzenli bir şekilde ekrana yazdırabiliriz.

Bununla birlikte, return() fonksiyonunun içinde yapılan değişiklikler bileşenleri doğrudan etkiler. Bu nedenle, bu fonksiyonun düzenlenmesine özen gösterilmelidir.

Yukarıdaki örnek kodda, BlogPost bileşenimizde yer alan `location` değişkenine, useLocation hook'unun dönüş değeri atandı. Daha sonra bu değişken üzerinden URL'deki parametrelere erişerek, sayfalar arası geçişte kullanabiliriz. Örnegin `console.log(location.search)` komutuyla, URL'deki `id` parametresine erişebiliriz.

useLocation hook'u React Router paketiyle birlikte geldiği için, kullanmadan önce bu paketi bileşenimize import etmemiz gerekiyor. Daha sonra hook'u kullanarak, URL'deki parametrelere erişim sağlayabiliriz. useLocation hook'u, gönderilen URL'nin bilgilerini tutan bir nesne döndürür. Bu nesne üzerinden adres bilgilerine, arama sorgularına ve hashtag bilgilerine ulaşabiliriz. Bu sayede route parametrelerini kolayca okuyabilir ve uygulama içerisinde paylaşabiliriz.

Bu makalede React Router ile sayfalar arası geçiş yaparken kullanabileceğimiz useLocation hook'unun ne olduğunu ve nasıl kullanılacağını öğrendik. Bu hook, URL bilgilerini içeren bir nesne döndürerek, dinamik bir sayfa oluşturma veya URL parametrelerine göre sayfalar arasında gezinme işlemlerini kolaylaştırıyor. Ayrıca, useLocation hook'u ile sayfanın URL'sindeki parametrelere erişerek, route parametrelerini kullanarak dinamik bir uygulama oluşturabiliriz. Burada kullanılan kod örnekleri ise, konuyu daha iyi anlamamıza yardımcı oluyor. React Router kullanılırken, useLocation hook'unun kullanımı oldukça önemlidir ve bu makale ile bu işlemi kolayca öğrenebilirsiniz.

```javascript

useLocation Hook'unda Dönen Bilgiler Nelerdir?

useLocation hook'u, React Router ile gelen bir fonksiyondur. Bu fonksiyon, sayfanın URL bilgilerini içeren bir nesne döndürür. Bu nesne, aşağıdaki bilgileri içerir:

• pathname: Sayfanın URL'sindeki adres bilgisini tutar.
• search: URL'deki arama sorgusunu ('?' ile başlayan parametreler) tutar.
• hash: Sayfanın URL'sindeki hashtag (#) bilgisini tutar.
• state: Eğer geçmiş sayfadaki erişimiz miş under İşlemleri yapıyorsak kullanabileceğimiz opsiyonel bir nesne.

Bu bilgiler, dinamik bir sayfa oluşturmak veya URL parametrelerine göre sayfalar arası geçiş yapmak için oldukça önemlidir. Bu sayede, kullanıcıların daha düzenli ve anlaşılabilir bir şekilde uygulamamızı kullanmalarını sağlayabiliriz.

pathname: Sayfanın URL'sindeki adres bilgisini tutar.

useLocation hook'u, route parametrelerine erişim sağladığı gibi, sayfanın URL'sindeki adres bilgisini de tutar. URL'nin adres bilgisine, `location.pathname` özelliği üzerinden erişebiliriz. Örneğin, "/about" adresindeki bir sayfada olduğumuzu varsayalım. useLocation hook'unu kullanarak, sayfanın pathname bilgisine aşağıdaki gibi erişebiliriz:

const location = useLocation();

console.log(location.pathname); // '/about'

Sayfanın pathname bilgisi, URL'deki adres bilgisiyle aynıdır. Bu nedenle, sayfa geçişleri sırasında adres bilgilerinin tutulmasına ve kullanılmasına olanak sağlar.

search: URL'deki arama sorgusunu temsil eder ve genellikle '?' ile başlayan parametrelerle birlikte gelir. search, bir dize olarak döndürülür ve URL'deki belirli sorgulara erişim sağlar. Örneğin, bir kullanıcının arama sorgusu anahtar kelimesini içeren bir blog yazısı listesi sayfasına yönlendirildiğini varsayalım. URL'de, search özelliği '?q=anahtar+kelime' olarak görünecektir. Bu şekilde, useLocation hook'unu kullanarak search özelliğine erişebilir ve arama sonuçlarını göstermek için kullanabilirsiniz. Ayrıca, search özelliğini yeniden yapılandırmak ve yeni bir arama sorgusu sonucunda sayfalama veya sıralama işlemlerini devreye sokmak da mümkündür.

React Router ile route parametrelerine erişmek için kullanabileceğimiz bir diğer bilgi ise URL'deki hashtag (#) bilgisidir. Özellikle tek sayfa uygulamalarında sıkça kullanılan bu özellik, kullanıcının sayfayı güncellemeden sadece belirli bir bölümünü değiştirmesini sağlar.

useLocation hook'u ile, sayfanın URL'sindeki hashtag (#) bilgisine de erişebilir ve uygulamamızı bu özellikle zenginleştirebiliriz. Örneğin, bir single-page application içerisinde birkaç farklı bölüm olduğunu ve kullanıcının farklı bölümlere hızlıca erişmek istediğini varsayalım. Bu durumda, her bölüm için bir hashtag (#) belirleyerek URL'ye ekleyebilir ve hash bilgisine erişerek, kullanıcının istediği bölüme hızlıca gitmesini sağlayabiliriz.

Bunun yanı sıra, HTML formlarında da hashtag bilgisini sıkça kullanırız. Özellikle, bir form içerisinde birden fazla seçenek olduğu ve kullanıcının seçenekler arasında gezinerek farklı bilgilere erişmesi gerektiği durumlarda, farklı seçeneklere hashtag atanabilir ve kullanıcının seçtiği seçenek ile ilgili bilgileri gösteren bir bölüme anında yönlendirilebilir.

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

Bir diğer özellik ise `state`. Eğer sayfalar arasındaki geçişlerde, geçmiş sayfadan veri taşımamız gerekiyorsa, `state` kullanabiliriz. Bu nesne, route parametrelerinden farklı olarak opsiyoneldir ve içinde istediğimiz verileri barındırabilir.

Örneğin, kullanıcının bir form doldurduğu sayfadayken, bu bilgileri bir sonraki sayfada kullanmak isteyebiliriz. Bu durumda, `state` objesi içinde bu verileri tutabilir ve sonraki sayfada bu verilere erişerek işlemlerimizi gerçekleştirebiliriz.

Bu özelliği kullanmak için, `Link` öğesinin `to` özelliği yerine `state` özelliğini kullanabiliriz. Ayrıca, kullandığımız bileşende `location.state` olarak bu verilere erişebiliriz.

Örnek Senaryo

=Bir blog uygulaması düşünelim. Her blog yazısı kendine has bir `id` değeri ile bir URL'ye sahip olsun. Örneğin:

Blog uygulamamızda, her yazının kendine özgü bir `id` değeri olacak ve bu değerler URL'de parametre olarak belirtilecek. Örneğin `/blog-post?id=123`. Kullanıcının bir blog yazısını okurken, o yazının benzer yazılarını görüntülemek için bir buton eklemek istiyoruz. Bunun için, her blog yazısının değerine göre dinamik şekilde buton eklemeliyiz.

Bunu yapmak için, yazının `id` parametresine URL'den erişmeliyiz. Bu işlemi de `useLocation` hook'u ile kolayca gerçekleştirebiliriz. Yazının bileşeninde `useLocation` hook'unu kullanarak `id` parametresine erişip, butonun `to` özelliğine ekleyebiliriz. Butona tıklandığında ise ilgili sayfaya parametre taşınmış olacaktır.

Özetle, route parametrelerini kullanarak dinamik bir uygulama oluşturma işlemi oldukça basittir. `useLocation` hook'u ile URL'deki parametrelere erişim sağlayarak, uygulamanın daha dinamik ve kullanışlı olmasını sağlayabiliriz.

`/blog-post?id=123`

Bir blog uygulaması düşünelim. Her blog yazısı kendine has bir `id` değeri ile bir URL'ye sahip olsun. Örneğin:

`/blog-post?id=123`

Bu sayfada bulunan bir butona tıkladığımızda, o yazının benzer yazıları listelenen sayfada açılmasını istiyoruz. Bunu, route parametrelerini kullanarak yapabiliriz.

Yazının route parametresi, yukarıda belirtildiği gibi URL'deki `id` değeri olacak. `useLocation` hook'unu kullanarak, yazının URL'sinden `id` parametresine erişebilir ve bunu butona `to` özelliği olarak ekleyebiliriz.

Bu şekilde, `Similar Posts` butonuna tıklandığında `id` parametresi `similar-posts` sayfasına taşınacaktır. Böylece, route parametrelerini kullanarak dinamik bir uygulama oluşturabiliriz.

``` The given code is an example of how to use the useLocation hook to access route parameters. With the help of this hook, we can easily read and use the URL parameters in our application. The code imports the useLocation hook from the react-router-dom package and declares a BlogPost function component. Inside the component, we call the useLocation hook and store its returned value in a constant variable called location. Then we log two properties of the location object, pathname and search, to the console.

In the return statement of the component, we render some sample JSX elements to represent a blog post. We also render a Link component from react-router-dom package that uses the 'to' property. The 'to' property value is a dynamic URL with an 'id' parameter that will take the user to a similar posts page when clicked. This is just an example of how to use the useLocation hook and route parameters to create a dynamic web application.

Overall, the useLocation hook makes it easy to access and manipulate the URL parameters of a web application.

import { useLocation } from 'react-router-dom';

Bir sayfadan diğer sayfaya geçiş yaparken bazen URL üzerinde parametre aktarımı yapmamız gerekebilir. react-router-dom paketi, React uygulamalarımız için sayfalar ve rotalar arasındaki yönlendirmeleri sağlamak amacıyla kullanılır.

useLocation hook'u da bu pakete dahildir ve bir bileşenin sayfa URL'ini etkili bir şekilde takip etmek için kullanılır. Bu sayede bileşenlerin URL'deki herhangi bir parametreye erişebilmesi ve bu parametreleri uygulama içerisinde kullanabilmesi sağlanır.

Bunun için öncelikle react-router-dom paketini projemize dahil etmeliyiz. İlgili bileşenimiz içerisinde useLocation hook'unu çağırarak, sayfa URL'sinde ki herhangi bir parametreye kolayca ulaşabiliriz.

Örnek olarak aşağıdaki kod parçasında useLocation hook'u kullanarak bir blog yazısının URL'sinden id parametresine erişip, daha sonra bu parametreyi ilgili butona ekliyoruz:

import { useLocation } from 'react-router-dom';import { Link } from 'react-router-dom';function BlogPost(props) {  const location = useLocation();    return (      <div>        <h2>Blog Post Title</h2>        <p>This is the content of the blog post.</p>        <Link to={`/similar-posts?id=${props.id}`}>Similar Posts</Link>      </div>    );}

Bu işlem sayesinde, yazıların bir listesi bulunan `similar-posts` sayfasına gidildiğinde, ilgili yazının `id` parametresi otomatik olarak yol parametresi olarak taşınacaktır. Böyle davranarak, kullanıcıların diğer sayfalara geçişlerinde veya verileri paylaşımlarında URL üzerinden veri taşımak için useLocation hook'u oldukça kullanışlıdır.

React Router ile sayfalar arası geçişler yaparken, bir sayfadan diğerine geçmek için `Link` bileşenini kullanırız. `Link` bileşeni, sayfalar arası geçişi kolaylaştırmak için özelleştirilmiş bir bileşendir. `Link` bileşeni, bir sayfa için URL'yi belirler ve tıklanabilir bir alana dönüştürür.

`Link` bileşenini kullanmak çok kolaydır. Sadece `to` özelliğine gidilmesi gereken URL'yi belirtmeniz yeterlidir. Örneğin, aşağıdaki kodda, `to` özelliğine `/about` vererek, `About` sayfasına yönlendirebilirsiniz.

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

function App() { return (

`Link` bileşeni kullanarak, tek bir bileşenle CSS stilleri ve diğer özellikler ekleyebiliriz. Örneğin:

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

function App() { const linkStyle = { color: 'red', fontSize: '20px', textDecoration: 'none', margin: '10px' };

return (

Bu örnek, `linkStyle` adında bir nesne oluşturarak, stil özelliklerini tanımlar. Daha sonra, `style` özelliğine bu nesneyi ekleyerek, her iki `Link` bileşenine de aynı stil özelliklerini uygular.

Sonuç olarak, `Link` bileşeni, React Router ile dinamik bir uygulama oluşturmak için çok önemli bir bileşendir. Basit bir şekilde kullanabilir, CSS stilleriyle kişiselleştirebilir ve uygulamanın herhangi bir yerinde kullanabiliriz.

Bir blog yazısının içeriği, başlığı ve benzer yazıların bulunduğu sayfada bir buton göstermek istiyoruz. Bu butona tıkladığımızda benzer yazıların bulunduğu sayfaya yönlendirmeyi hedefliyoruz. Bu işlemi, route parametreleri kullanarak gerçekleştireceğiz.

İlk önce, useLocation hook'unu kullanarak, sayfanın route bilgilerine erişim sağlayacağız. Ardından, Link bileşenini kullanarak butonu oluşturacağız. Butona tıklandığında ise yönlendirme yapılmasını sağlamak için `to` özelliğine benzer yazıların bulunduğu sayfanın URL'sini dinamik olarak ekleyeceğiz. Bu sayede, benzer yazıların bulunduğu sayfada dinamik bir şekilde URL bilgisini kullanacağız.

Yukarıdaki örnekte, `to` özelliğinde URL bilgisi belirtilirken route parametreleri kullanılmaktadır. `props` olarak parametre alan BlogPost fonksiyonu içinde, useLocation hook'u ile route bilgilerine erişilebilmektedir.

React Router'da sayfalar arası geçiş yaparken URL'deki parametreleri diğer sayfalara aktarabilmek adına, useLocation hook'unu kullanabiliriz. Bu hook, bir React bileşeninde bulunduğumuz sayfanın URL bilgilerini tutan bir nesne döndürür. Kısacası, route parametrelerine erişim sağlayabilmemizi kolaylaştırır.

Hook'u kullanmak için öncelikle, kullanacağımız bileşene React Router paketini dahil etmeliyiz. Ardından, bileşen içinde useLocation() fonksiyonunu çağırarak nesneyi elde edebiliriz.

import { useLocation } from 'react-router-dom';function App() {  const location = useLocation();  // ...}

useLocation hook'u, kullanıcıya sayfanın URL'sindeki bilgileri kullanabilme imkanı sunar. Döndürdüğü nesne, sık kullanılan bilgiler olan pathname, search, hash ve state'i içerir.

• pathname: Sayfanın URL'sinde yer alan adres bilgisini tutar.
• search: URL'deki arama sorgusunu (? ile başlayan parametreler) tutar.
• hash: Sayfanın URL'sindeki hashtag (#) bilgisini tutar.
• state: Geçmiş sayfada bulunan bir veriye erişmek için kullanabileceğiniz opsiyonel bir nesnedir.

Yukarıdaki bilgileri kullanarak, dinamik sayfalar veya URL parametrelerini kullanarak sayfalar arası geçiş işlemleri yapabiliriz. Örneğin, bir blog uygulamasında her yazının kendine özel bir id'si olabilir ve butonlar aracılığıyla diğer yazılara erişebiliriz. Bu sayede, React Router'da sayfalar arası geçiş işlemlerini daha dinamik ve esnek hale getirebiliriz.

return (kod) kısmı, bir React bileşeninin kullanıcılara ne göstereceğini belirlediği bölümdür. Bir sayfa veya bileşen içerisinde hangi HTML öğeleri ve bileşenleri görünecekse, genellikle burada belirtilir. Route parametrelerinin kullanımı ile ilgili örnek senaryodaki örnekte olduğu gibi, butonlara veya diğer bileşenlere tıklama işlemleri de burada tanımlanabilir.