Merhabalar.
Bu yazımda Route işlemlerimizi yaparken kullanacağımız kütüphaneden sizlere bahsetmeye çalışacağım.
Aynı zamanda Router konusunu işlerken geliştireceğimiz uygulamayı oluşturacak ve react-router-dom kurulumunu yapıp bir sonraki eğitim yazımıza geçeceğiz.
Proje klasörüme reacte-router ismini verdim ve React kurulumumu gerçekleştirdim.
İlk olarak terminalde aşağıdaki komutu çalıştıralım ve kütüphanemizi projemize dahil edelim.
npm i react-router-dom
Şimdi kısaca bu kütüphanemiz ne yapar ne işe yarar bunlara bakalım. Aşağıda kod parçaları paylaşacağım şimdilik kodlara takılmayınız.
React uygulamalarında sayfa yönlendirmeleri ve gezinme işlemlerini kolaylaştırmak için kullanılan önemli bir kütüphane olan react-router-dom
, web uygulamalarının kullanıcı deneyimini zenginleştirmek ve SPA (Tek Sayfa Uygulaması) mimarisini daha etkili bir şekilde kullanmak için tasarlanmıştır.
Bu kütüphane, React tabanlı projelerde farklı sayfalar arasında geçiş yapmayı, URL’yi takip etmeyi ve uygulama durumunu güncellemeyi sağlayan bir dizi araç ve bileşen içerir.
react-router-dom
kütüphanesi, temel olarak üç ana bileşeni içerir: BrowserRouter
, Route
, ve Link
.
BrowserRouter: Uygulamanın genelindeki sayfa yönlendirmelerini sağlayan bir bileşendir. Bu bileşen, tarayıcıdaki URL’yi takip eder ve uygun Route
bileşenini render eder.
Route: Belirli bir URL yoluna eşleşen bir bileşeni render eder. Bu, kullanıcı belirli bir URL’yi ziyaret ettiğinde hangi bileşenin görüntüleneceğini belirlemek için kullanılır.
Link: Sayfa içindeki bağlantıları temsil eden bir bileşendir. Kullanıcılar bu bağlantılara tıkladığında, belirli bir URL’ye geçiş yaparlar.
İlk olarak, BrowserRouter
bileşenini projenize eklemelisiniz. Bu, tarayıcıdaki URL’yi dinler ve uygun Route
‘ları render etmek için kullanılır. Genellikle uygulamanızın ana bileşeni içinde kullanılır.
import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
{/* Uygulama içeriği buraya gelecek */}
</Router>
);
}
Route
bileşeni, belirli bir URL yolu ile eşleşen bir bileşeni render etmek için kullanılır. Yol eşleştirmesi için path özelliği kullanılır.
import { Route } from 'react-router-dom';
function Home() {
return <h2>Ana Sayfa</h2>;
}
function About() {
return <h2>Hakkında</h2>;
}
function App() {
return (
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
Yukarıdaki örnekte, ana sayfa için /
ve hakkında sayfası için /about
URL yolları tanımlanmıştır.
Sayfalar arasında geçiş yapmak için Link
bileşeni kullanılır. Bu bileşen, kullanıcının tıkladığı bağlantıya göre URL’yi değiştirir.
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Ana Sayfa</Link>
</li>
<li>
<Link to="/about">Hakkında</Link>
</li>
</ul>
</nav>
);
}
Yukarıdaki örnekte, Link
bileşeni, kullanıcının “Ana Sayfa” veya “Hakkında” bağlantılarına tıklaması durumunda ilgili sayfaya yönlendirmeyi sağlar.
react-router-dom
ayrıca URL’de geçiş parametreleri kullanma yeteneği de sağlar. Bu, dinamik içerik oluşturmak için kullanışlıdır.
function UserProfile({ match }) {
return <h2>Kullanıcı Profili: {match.params.username}</h2>;
}
function App() {
return (
<Router>
<Route path="/profile/:username" component={UserProfile} />
</Router>
);
}
Yukarıdaki örnekte, /profile/:username
URL yolu, kullanıcının adını içeren dinamik bir parametreye izin verir.
react-router-dom
ayrıca programatik olarak sayfa yönlendirmeleri yapma olanağı da sağlar. Bu genellikle bir fonksiyon içinde useHistory
veya useNavigate
gibi kancalar kullanılarak gerçekleştirilir.
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
function redirectToAboutPage() {
history.push('/about');
}
return (
<div>
<p>Component içeriği</p>
<button onClick={redirectToAboutPage}>Hakkında Sayfasına Git</button>
</div>
);
}
Yukarıdaki örnekte, useHistory
kancası kullanılarak bir butona tıklama durumunda programatik olarak '/about'
sayfasına yönlendirme yapılmaktadır.
react-router-dom
kütüphanesi, React tabanlı uygulamalarda gezinme, sayfa yönlendirmeleri ve URL yönetimi konularında büyük bir kolaylık sağlar. Bu kütüphane, SPA mimarisini daha etkili bir şekilde kullanmanıza olanak tanırken, aynı zamanda kullanıcı dostu ve dinamik web uygulamaları geliştirmenize olanak sağlayan güçlü bir araç setine sahiptir.
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…