Merhaba dostlar, bu yazımda size react-router-dom yapısını anlatmaya çalışacağım. Bir react projesini create-react-app komutuyla oluşturup ayağa kaldırdıktan sonra yapılması gereken işlemlere değindim. Keyifli okumalar, bol kodlamalar...
React-Router-Dom nedir?
React-router-dom, React tabanlı web uygulamalarında yönlendirme (routing) işlemlerini kolaylaştırmak için kullanılan bir kütüphanedir. Bu kütüphane, tek sayfa uygulamalarında (Single-Page Application, SPA) farklı URL'ler arasında gezinmeyi sağlar ve kullanıcının sayfalar arasında geçiş yapmasını yönetir.
React-router-dom, React Router adı verilen bir paketin DOM (Document Object Model) için uyarlanmış halidir. React Router, web uygulamalarında yönlendirme işlemlerini yönetmek için yaygın olarak kullanılan bir pakettir ve react-router-dom bu paketin web uygulamaları için bir sürümüdür.
React Router'ın temel bileşenleri şunlardır:
- <BrowserRouter>: Tarayıcının geçerli URL'sini kullanarak yönlendirme işlemlerini sağlayan bir bileşendir. Uygulamanın en üst düzeyinde yer alır ve yönlendirme işlemlerini etkinleştirir.
- <Routes>: Rotaların sırayla kontrol edilmesini ve yalnızca ilk eşleşen rotanın görüntülenmesini sağlar. Bu nedenle, rotaları doğru sıralamak ve en spesifik olanlardan daha genel olanlara doğru ilerlemek önemlidir. Böylece, en doğru rotanın eşleşmesi sağlanır ve yanlış yönlendirmeler önlenmiş olur.
- <Route>: Belirli bir URL yolunu temsil eder ve bir bileşeni bu yola eşlemek için kullanılır. Yolun eşleşmesine göre ilgili bileşenin görüntülenmesini sağlar. Yönlendirme parametreleri, isteğe bağlı parametreler veya tam eşleşme gibi özellikleri destekler. Örneğin, path propu, rotanın URL ile eşleşme koşulunu belirtirken, component veya render propu, eşleşme durumunda görüntülenecek bileşeni belirtir.
- <Link>: Tıklanabilir bir bağlantı oluşturur ve kullanıcının belirli bir rota gitmesini sağlar. Sayfa yenileme yapmadan, uygulama içinde gezinmeyi sağlar. Örneğin, <Link to="/about">About</Link> şeklinde kullanarak "/about" yoluna yönlendirme yapabilirsiniz.
- <Redirect>: Belirli bir rota yönlendirmesini sağlar. Örneğin, bir koşula bağlı olarak kullanıcıyı başka bir sayfaya yönlendirebilirsiniz.
Ne İşe Yarar?
React-router-dom, React tabanlı web uygulamalarında yönlendirme (routing) işlemlerini kolaylaştıran bir kütüphanedir. İşlevi, kullanıcının web uygulamasında farklı URL'ler arasında gezinmesini sağlamaktır. React-router-dom, tek sayfa uygulamalarında (Single-Page Application, SPA) çoklu sayfa benzeri bir deneyim sunmak için kullanılır.
React uygulamalarında genellikle bir ana sayfa (home page) veya farklı özelliklere sahip farklı sayfalar bulunur. React-router-dom, bu sayfalar arasında geçiş yapmayı ve sayfaların doğru şekilde görüntülenmesini sağlayan bir yapı sunar.
Kurulumu ve Kullanımı
- Kurulum: Öncelikle react-router-dom'u projenize dahil etmelisiniz. Bu için aşağıdaki komutu kullanarak npm veya yarn ile react-router-dom'u projenize ekleyebilirsiniz:
veya
- Router bileşeni oluşturma: Uygulamanızın en üst düzeyinde bir Router bileşeni oluşturmalısınız. Genellikle js veya index.js gibi ana dosyalarda yapılır. Bunu yapmak için aşağıdaki gibi bir kod yapısını kullanabilirsiniz:
*Bu örnekte, Router bileşeni kullanarak ana rotaları belirtiyoruz. Routes bileşeni, rotaları tanımlamak ve eşleşme durumunda hangi bileşenin render edileceğini belirtmek için kullanılır. Route bileşenleri, belirli URL yollarını ve bu yollara eşleşen bileşenleri tanımlar.
- Sayfa bileşenlerini oluşturma: Her bir sayfa için bir bileşen oluşturmalısınız. Örneğin, yukarıdaki örnekte Home, About ve Contact bileşenleri yer almaktadır. Bu bileşenler, ilgili rotalarla eşleşen sayfaları temsil eder.
- Link bileşenleri ile gezinme bağlantılarını oluşturma: react-router-dom, sayfalar arasında geçiş yapmak için Link bileşenini kullanır. Bu bileşeni kullanarak gezinme bağlantılarını oluşturabilirsiniz. Örneğin:
Bu örnekte, Link bileşenleri kullanılarak ana sayfa, hakkında ve iletişim sayfalarına yönlendirme bağlantıları oluşturulmuştur. to özelliği, hedef rotayı belirtir.Böylelikle react-router yapısını projemizde neden ve nasıl kullanabileceğimizi öğrendik.
Herkese iyi çalışmalar 👨🏻💻