React Router Nedir, Ne İşe Yarar, Nasıl Kullanılır ?
React Router Nedir, Ne İşe Yarar?
React Router, React uygulamalarında sayfa yönetimini kolaylaştırmak ve kullanıcıların farklı sayfalar arasında gezinmelerini sağlamak için kullanılan bir JavaScript kütüphanesidir. Bu kütüphane, tek sayfalık uygulamalar (SPA) için tasarlanmıştır ve sayfa geçişlerini hızlı ve sorunsuz bir şekilde yapmak için URL tabanlı bir yönlendirme sağlar.
React Router Nasıl Kullanılır ?
React Router Kurulumu
React Router’ı projeye eklemek için “react-router-dom” paketinin yüklenmesi gerekir. Bu paketi yüklemek için terminal veya komut istemcisine aşağıdaki komut yazılır.
npm install react-router-domReact Router Import
Gerekli bileşenler projeye eklenir.
import { BrowserRouter, Routes, Route } from "react-router-dom";Browser Router
React Router’ın temelinde “BrowserRouter” bileşeni bulunur. Bu bileşen, uygulamanın URL’sini takip eder ve günceller. Örneğin, “/anasayfa” URL’sine gidildiğinde, React Router bu değişikliği algılar ve ilgili bileşeni yükler.
import ReactDOM from 'react-dom';
import React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('app')
);Route
Route, uygulamanın konumunun farklı React bileşenleri ile eşleştirilmesini sağlar. Örneğin, kullanıcı /home URL’sine gittiğinde “Home” bileşeni render edilmek istenirse, aşağıdaki gibi bir “Route” işlemi yapılır.
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />Routes
Routes, Router kütüphanesinin bir parçasıdır. Farklı sayfa rotalarını ve bu rotalara karşılık gelen bileşenleri yönetmek için kullanılır. Belirli bir URL ziyaret edildiğinde hangi bileşenin render edileceğini belirlemek için kullanılır.
import { Routes, Route } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}Router
Router bileşenlerinin ana bileşenidir. Sayfa yönetimi için gerekli altyapıyı sağlar. Tarayıcı URL’siyle senkronize olarak çalışarak, URL’deki değişiklikleri algılar ve uygulamanın bu değişikliklere tepki vermesini sağlar.
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}Link
Link bileşeni, navigasyon linkleri oluşturmak için kullanılır ve genellikler sayfalar arasında geçiş yaparken sayfaların yeniden yüklenmesini önler.
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}
