React Router Nedir ve Nasıl Kullanılır?

React, modern web uygulamaları geliştirmek için en popüler JavaScript kütüphanelerinden biridir. Bununla birlikte, birçok React uygulaması çoklu sayfalardan oluşur ve kullanıcılar arasında gezinmek için bir yol sağlamak gereklidir. İşte burada React Router devreye girer.

React Router, React uygulamalarında gezinme işlemini kolaylaştıran bir kütüphanedir. Sayfa geçişleri, URL yönlendirmeleri ve diğer gezinme işlemleri gibi birçok özelliği içerir. Bu yazıda, React Router’ın nasıl kullanıldığını ve bazı temel özelliklerini öğreneceksiniz.

Kurulum

React Router’ı kullanmak için öncelikle yüklemeniz gerekiyor. NPM paket yöneticisini kullanarak React Router’ı yükleyebilirsiniz. Aşağıdaki komutu terminale yazarak React Router’ı yükleyebilirsiniz:

npm install react-router-dom

React Router’ı kullanmak için, projenize eklemeniz gereken iki bileşen vardır: <BrowserRouter> ve <Route>. <BrowserRouter> bileşeni, uygulamanızda gezinme işlemlerini yönetirken <Route> bileşeni, belirli bir URL yolunu ve eşleşen bir bileşen içeriğini belirler.

Örnek:

Aşağıdaki örnek, React Router’ı kullanarak sayfa yönlendirmesi yapmak için basit bir uygulama göstermektedir. Bu örnekte, “Home” ve “About” sayfaları bulunmaktadır. “Home” sayfasına varsayılan olarak yönlendirilirken, “About” sayfası için ayrı bir URL belirlenmiştir. Bu örnekte, <BrowserRouter> bileşeni uygulamanın genelinde kullanılırken <Route> bileşeni sayfaları belirlemek için kullanılır.

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

export default App;

Yukarıdaki kodda, BrowserRouter ile uygulamamızı sarmalıyoruz ve Route bileşenleri ile sayfalarımızı belirtiyoruz. Link bileşeni ile sayfalar arasında gezinme işlemini gerçekleştirmek için kullanıcı arayüzüne birkaç bağlantı ekliyoruz.

<nav> elementi içinde Link bileşenleri oluşturuyoruz ve her biri ilgili sayfaya yönlendirme yapar. Route bileşenleri de path özelliği ile sayfanın URL yolunu ve component özelliği ile sayfanın içeriğini gösteren bileşeni belirtir.

Ayrıca, exact özelliği ile "Home" sayfasının varsayılan sayfa olarak belirlendiğini belirtiyoruz. Bu özellik, yalnızca belirtilen URL'nin tam olarak eşleştiğinde içeriği gösterir ve diğer benzer URL'ler için çalışmaz.

Bu örnekte, Home ve About bileşenleri içinde birkaç metin ekledik. Ancak, gerçek uygulamalarda, bileşenler daha karmaşık ve işlevsel olabilir. React Router, birden fazla bileşeni birbirine bağlayabilir ve hatta dinamik olarak bileşenleri yükleyebilir.

Sonuç:

React Router, React uygulamalarında gezinme işlemini yönetmek için harika bir kütüphanedir. Bu yazıda, React Router’ın temel özelliklerini ve nasıl kullanılacağını öğrendiniz. React Router, karmaşık uygulamalarda bile kullanımı kolay ve performanslı bir gezinme çözümü sunar.