React Router, web sitelerinde yönlendirme işlevselliği sağlayan bir kütüphanedir Anasayfa ve alt sayfaların farkı, anasayfanın genellikle web sitesinin giriş sayfası olduğu, genel bilgilerin ve önemli içeriklerin yer aldığı sayfa iken, alt sayfaların ise belirli konularda bilgi edinmek veya belirli işlemler yapmak için kullanılan farklı sayfalar olduğudur React Router kurulumu oldukça kolaydır ve Router ve Route bileşenleri kullanılarak sayfaların yönlendirmesi sağlanırken, Link bileşeni ile sayfalar arasında gezinme özelliği sağlanabilir Anasayfa ve alt sayfaların oluşturulması, web sitenizin ziyaretçilerine daha kapsamlı deneyimler sunmasına yardımcı olur

Bir web sitesinin tüm sayfaları, ziyaretçilere mümkün olan en iyi deneyimi sunmak için tasarlanmalıdır. Bu nedenle, bir web sitesinde yalnızca anasayfa yerine birden fazla sayfa oluşturmak gerekebilir. React Router, web siteleri için yönlendirme işlevselliği sağlayarak, anasayfa ve alt sayfa sayısını arttırmak için harika bir seçenektir.

React Router ile bir web sitesi için anasayfa ve alt sayfalar oluşturmak oldukça kolaydır. İlk adım, Router ve Route bileşenlerini projenize dahil etmektir. Ardından, Route bileşenlerini kullanarak her sayfa için bir URL ve eşleşen bir bileşen tanımlamanız gerekir. Ana bileşeninizde Link bileşenlerini kullanarak sayfalar arasında gezinebilirsiniz. Not Found sayfası oluşturmak için Switch bileşenini kullanabilirsiniz.

Anasayfa ve alt sayfaların oluşturulması, web sitenizin ziyaretçilere daha kapsamlı bir deneyim sunmasına yardımcı olabilir. Kullanıcıların ihtiyaç duydukları bilgilere daha hızlı erişmelerini sağlar ve web sitenizin genel kullanılabilirliğini artırır. React Router kullanarak, web sitenizin tüm sayfalarını yönetmeniz ve ziyaretçilerinize en iyi deneyimi sunmanız mümkündür.

React Router Nedir?

React Router, React uygulamalarının yönlendirme işlevselliğini sağlayan bir kütüphanedir. React Router, URL'lerin belirli bileşenlere eşlenmesini ve sayfalar arasında geçiş yapılmasını sağlar. Bu sayede, web sitesi kullanıcılarına daha kolay bir deneyim sunar ve web uygulamalarının daha kapsamlı olmasını sağlar.

Anasayfa ve Alt Sayfaların Farkı Nedir?

Anasayfa ve Alt Sayfaların Farkı Nedir?

Anasayfa, bir web sitesinde genellikle ilk olarak ziyaret edilen sayfadır ve web sitesinin giriş sayfasıdır. Anasayfada, web sitesi hakkında genel bilgiler ve önemli içerikler yer alır. Alt sayfalar ise, bir web sitesinde anasayfaya bağlı olarak tasarlanmış farklı içeriklerin yer aldığı sayfalardır. Örneğin, bir e-ticaret sitesinde, ürünler sayfası, hakkımızda sayfası, iletişim sayfası, blog sayfası gibi farklı sayfalar alt sayfalardır. Bu sayfalar, ziyaretçilerin daha spesifik bir konuda bilgi edinebilecekleri veya belirli bir işlem yapabilecekleri yerlerdir.

Anasayfa, genellikle web sitesinin marka kimliği ve anahtar mesajlarının iletilmesi amacıyla kullanılırken, alt sayfalar, ziyaretçilerin belirli bir hedefe ulaşmalarına yardımcı olan içerikler sunar. Bu sayfalar, web sitesinin amaçlarına ve hedef kitlesine yönelik olarak tasarlandığı için, anasayfa kadar önemli bir role sahiptir.

React Router Kurulumu

React Router kullanarak web sitenizde anasayfa ve alt sayfalar oluşturmak istiyorsanız, öncelikle React Router'ı projenize yüklemeniz gerekiyor. Bunun için npm veya yarn paket yöneticisini kullanarak paketi yükleyebilirsiniz.

Ardından, projenize Router ve Route bileşenlerini dahil etmelisiniz. Router bileşeni, yönlendirmelerin kontrolünü sağlarken, Route bileşeni adres çubuğundaki URL'ye göre eşleşen bileşenin yüklenmesini sağlar.

Bunun yanı sıra, Link bileşenini de kullanarak sayfalar arasında gezinme özelliğini sağlayabilirsiniz. Projede kullanacağınız bileşenleri kolayca oluşturmanız için React Router'ın kurulumu oldukça kolaydır ve yukarıda bahsedilen adımları izleyerek kısa sürede tamamlayabilirsiniz.

Router ve Route Bileşenleri

React Router, web sitesindeki sayfalar arasında yönlendirmeleri sağlamak için kullanılan bir kütüphanedir. React Router'ı kullanarak, Router bileşeni projenizdeki tüm yönlendirmeleri yönetir, Route bileşeni ise yönlendirmeleri çalıştırmak için kullanılır.

Route bileşeni, adres çubuğundaki URL'ye göre eşleşen bileşenin yüklenmesini sağlar. Bu bileşen, kullanıcının adres çubuğunda belirtilen herhangi bir URL'ye göre bir uygulama sayfasının yüklenmesini sağlar. Route bileşeni, component prop'u aracılığıyla yüklenmesi gereken bileşeni belirtir. Bu bileşen, ayrıca URL'nin nasıl eşleştirileceğini belirten path prop'u ile çalışır.

Router bileşeni, tüm yönlendirmelerin yönetildiği yerdir. Bileşen, tüm Route bileşenlerini ve bazı özel bileşenleri yönetir. Bu bileşen, BrowserRouter ve HashRouter gibi farklı türleri içerir, ancak genellikle BrowserRouter kullanılır.

React Router'da kullanabileceğiniz diğer bileşenler arasında Switch ve Redirect bulunur. Switch bileşeni, eşleşen Route bileşenlerini yönetmek için kullanılırken, Redirect bileşeni, kullanıcının belirli bir URL'ye yönlendirilmesini sağlar.

Link Bileşeni

React Router kullanarak web sitenizin anasayfası ve alt sayfalarını oluşturuyorsanız, gezinme işlevselliği için Link bileşenini kullanabilirsiniz. Link bileşeni, sayfalar arasında gezinmek için kullanılır ve Router bileşeni tarafından yönetilir. Bu bileşen, gezinme menüleri, düğmeler veya metin bağlantıları gibi farklı tasarımlarla birlikte kullanılabilir.

Link bileşeninde, to' özelliği kullanılarak yönlendirilmek istenen URL belirtilir. Daha sonra, bu URL'ye tıklanırsa yönlendirilecek sayfanın bileşenini içeren Route bileşenine yönlendirilirsiniz.

• <Link to="/ana-sayfa">Ana Sayfa</Link>
• <Link to="/urunler">Ürünler</Link>

Yukarıdaki örneklerde, ilk Link bileşeni "ana-sayfa" adlı sayfaya ve diğeri "ürünler" adlı sayfaya yönlendirilecek. Router bileşeni, URL'ye göre hangi bileşenin yükleneceğini belirlediği için, doğru bileşen yüklenecektir.

Anasayfa ve Alt Sayfaların Oluşturulması

Anasayfa ve alt sayfaları oluşturmak için React Router kullanmak oldukça kolaydır. İlk olarak, anasayfa ve alt sayfalarınız için Route bileşenlerini tanımlamanız gerekir. Her bir Route bileşeni, bir URL ve eşleşen bir bileşene sahip olmalıdır. Bu bileşenleri tanımlamak, `` etiketini kullanarak yapılır. Örneğin, e-ticaret sitenizin anasayfasını oluşturmak için aşağıdaki kodu kullanabilirsiniz:

```html```Bu kodda, `/` yolunu kullanan `` bileşeni (`component`) tanımlanmıştır. `` bileşeni, path propertysini takip ederek, eşleşen URL'yi bulur ve component propertysinde belirtilen bileşeni yükler.

Alt sayfalar için de aynı prosedür geçerlidir. Örnekteki ürünler sayfasını oluşturmak için şu kod kullanılabilir:

```html```

Path propertysi `/urunler` olarak belirlenmiştir. Bu, URL'nin `/urunler` olması durumunda eşleşen bileşenin `` olduğunu ifade eder.

Oluşturduğunuz anasayfa ve alt sayfalarını birbirine bağlamak için Link bileşenlerini kullanabilirsiniz. Ana bileşeninizde, `react-router-dom` kütüphanesinden `Link` bileşenini içe aktardıktan sonra, navigasyon menüsünü oluşturabilirsiniz. Örneğin:

```html

• Ana Sayfa
• Ürünler

Bu kod, anasayfa ve ürünler sayfasına bağlantılar içeren bir listedir. Her bir `Link` bileşeni `to` özelliği ile hedef URL'yi alır. Böylece, tıklandığında ilgili sayfaya yönlendirilirsiniz.

React Router'ı kullanarak anasayfa ve alt sayfaları oluşturmak oldukça kolaydır. Yönlendirmeleri yönetmek için `` bileşenlerini, sayfaları birbirine bağlamak için `Link` bileşenlerini kullanarak, web sitenizde daha kapsamlı bir deneyim sunabilirsiniz.

Not Found Sayfası Oluşturma

Tanımlanan URL'lerde herhangi birine karşılık gelen bileşen bulunamazsa, bir Not Found sayfası gösterilir. Bu sayfa, kullanıcılara yanlış bir URL girdiklerinde veya erişmek istedikleri sayfa artık mevcut olmadığında gösterilir. React Router ile bu sayfayı oluşturmak için Switch bileşenini kullanabilirsiniz.

Switch bileşeni, Route bileşenleri arasında bir eşleşme bulunmadığında Not Found bileşenini yükler. Bu bileşen, herhangi bir URL'ye karşılık gelmeyen bir route bileşeni olarak tasarlanmıştır ve uygulamanın herhangi bir yerinde yer alabilir.

Switch bileşenini kullanmak için, Route bileşenlerini Switch bileşeni içinde tanımlamanız gerekir. Ana bileşeninizdeki Switch bileşeni, URL yolunu kontrol eder ve eşleşen Route bileşenini yükler. Eğer hiçbir Route bileşeni eşleşmiyorsa, Not Found bileşeni yüklenir ve kullanıcıya uygun bir mesaj gösterilir.

<Switch>  <Route exact path="/" component={Home} />  <Route path="/about" component={About} />  <Route path="/contact" component={Contact} />  <Route component={NotFound} /></Switch>      

Switch bileşeninin, anasayfa ve alt sayfaların yönlendirmesinde kullanılması, kullanıcı deneyimini geliştirir ve sayfalar arasında daha kolay geçiş sağlar. Ayrıca, eksik veya hatalı URL'ler için düzenli bir yönlendirme yaparak, ziyaretçilerinizin siteden ayrılmasını da engelleyebilirsiniz.

Sonuç

React Router'ın kullanımı ile web sitenizin anasayfa ve alt sayfalarını daha kolay bir şekilde oluşturabilirsiniz. Bu sayede kullanıcılarınıza daha fazla sayfa sunarak, daha kapsamlı bir deneyim yaşatırsınız. Bu yöntem aynı zamanda SEO açısından da faydalıdır, çünkü daha fazla sayfa daha fazla arama motoru endeksi anlamına gelir.

Kurulumu oldukça kolay olan React Router, Router ve Route bileşenleri ile tüm yönlendirmelerinizi kolayca yönetebilir, Link bileşenleri ile sayfalar arasında gezinebilirsiniz. Ayrıca, Not Found sayfası oluşturarak tüm hataları önleyebilirsiniz.

React Router'ın kullanımı, web sitenizin daha profesyonel ve organize gözükmesini sağlayacaktır. Kullanıcılarınız, sayfa trafiğini artırdığınız için daha fazla zaman sitede harcayacak ve size daha sadık olacaklardır. Bu nedenle, React Router kullanarak hem kullanıcıların deneyimini artırabilir hem de SEO açısından büyük faydalar sağlayabilirsiniz.

React Router'ın kolay kullanımı ve faydaları sayesinde, anasayfa ve alt sayfalarınızın sayısını artırarak, web sitenizi daha kapsamlı bir hale getirmek için hemen denemelisiniz.