React Router: Tek Sayfa Uygulamalarında Yönlendirme Nasıl Yapılır?

Merhabalar! Bugünkü yazımda, React projelerinde sıklıkla kullanılan ve tek sayfa uygulamalarında (SPA) sayfa yönlendirmesi sağlayan React Router kütüphanesini inceleyeceğiz. React Router’ın temel kavramlarını ve nasıl kullanılacağını öğrenmek için bu rehberi takip edin.

React Router Nedir?

React Router, React tabanlı web uygulamalarında kullanılan bir yönlendirme kütüphanesidir. Tek sayfa uygulamaları için özellikle uygundur ve kullanıcıların URL’leri değiştirirken sayfalar arasında geçiş yapmasını sağlar.

Kurulum ve Temel Kavramlar

React Router’ı projenize eklemek için npm veya yarn gibi paket yöneticilerini kullanabilirsiniz. Kurulumdan sonra, Router, Route, Link gibi temel kavramları öğrenmek önemlidir. Bu kavramlar, URL’leri bileşenlere eşleştirmenize ve sayfa geçişlerini yönetmenize olanak tanır.

Temel Kavramlar

React Router’ı kullanmak için bazı temel kavramları anlamanız önemlidir:

BrowserRouter: React Router’ın en yaygın kullanılan router türlerinden biridir. Tarayıcı uyumlu URL yapısını kullanarak, tarayıcı tarihçesini kullanarak URL’leri günceller ve yönlendirme işlemlerini gerçekleştirir.

Route: Belirli bir URL şablonuna karşılık gelen bir bileşeni render etmek için kullanılır. URL şablonu ile eşleşen bir Route, belirli bir bileşeni kullanıcının tarayıcısına gösterir.

Link: Sayfalar arasında gezinme sağlayan bir bileşendir. Kullanıcılar Link bileşenlerine tıkladıklarında URL değişir ve ilgili Route’e yönlendirilirler. Bu, sayfa yenilemesi olmadan sayfa geçişlerini sağlar.

Switch: Birden fazla Route bileşenini sarmalayan bir bileşendir. Tarayıcı adres çubuğundaki URL, Switch içindeki Route bileşenleri ile karşılaştırılır ve ilk eşleşen Route’in bileşeni render edilir.

Redirect: Belirli bir URL’e yönlendirme yapmak için kullanılır. Kullanıcı belirli bir URL’yi girdiğinde veya belirli bir eylemi gerçekleştirdiğinde, Redirect bileşeni belirtilen yeni URL’ye yönlendirir.

NavLink: React Router tarafından sağlanan bir bileşendir ve Link bileşenine benzer şekilde sayfalar arasında gezinme sağlar. Ancak, NavLink belirli bir URL ile eşleştiğinde kendisine bir aktif durum sınıfı ekler, bu da mevcut sayfanın veya URL'nin durumunu belirlemek ve stillemek için kullanılabilir.

NavLink, to özelliği aracılığıyla belirli bir URL'ye yönlendirme yapar ve activeClassName veya activeStyle gibi ek özellikler sağlar. Bu özellikler, belirli bir bileşenin veya stillerin aktif durumda olduğunda uygulanmasını sağlar.

Özetle, NavLink bileşeni, sayfa geçişlerini sağlamanın yanı sıra belirli bir URL'nin aktif durumunu işaretlemek ve stillemek için kullanılan bir bileşendir. Bu özellikleri, sayfalar arasında gezinmeyi daha kullanıcı dostu ve etkili hale getirmek için kullanılabilir.

Nasıl Kullanılır?

React Router’ı kullanmak için önce Router bileşenini projenize eklemeniz gerekir. Ardından, Route bileşenlerini kullanarak URL şablonlarını belirleyebilir ve eşleştiğinde hangi bileşenin render edileceğini belirleyebilirsiniz.

npm install react-router-dom

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}

Örnek Uygulama

Aşağıda, basit bir örnek uygulama bulunmaktadır. Bu uygulama, ana sayfa, hakkında ve iletişim sayfaları arasında gezinme sağlar:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h2>Ana Sayfa</h2>;
const About = () => <h2>Hakkında</h2>;
const Contact = () => <h2>İletişim</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Ana Sayfa</Link></li>
            <li><Link to="/about">Hakkında</Link></li>
            <li><Link to="/contact">İletişim</Link></li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
};

export default App;

React Router, web uygulamalarında gezinmeyi basitleştiren ve kullanıcı deneyimini iyileştiren güçlü bir araçtır. Bu yazıda sadece temel konulara değindik, ancak React Router’ın sunduğu daha gelişmiş özellikler ve kullanımlar da mevcuttur. React projelerinizde React Router’ı kullanarak, kullanıcıların uygulamanızı daha etkili bir şekilde gezmesini sağlayabilir ve genel kullanıcı deneyimini önemli ölçüde artırabilirsiniz.

Eğer bu yazı size faydalı olduysa, alkış butonuna tıklayarak teşekkür edebilirsiniz. Ayrıca beni takip ederek yeni yazılarımdan haberdar olabilirsiniz. Bir sonraki yazıda görüşmek üzere!

İletişime geçmek isterseniz tıklayınız.✨🤝