React Router v7 Nedir? Declarative Routing Rehberi

React Router Nedir?

React uygulamaları için bir routing kütüphanesidir. Sayfalar arasında geçişi etkinleştirir, full SPA desteği sağlar ve JSX ile çalışır.

• React için routing kütüphanesi
• Sayfalar arası geçiş
• Full SPA desteği
• JSX ile çalışır

Declarative Routing Nedir?

Route'larınızı JSX olarak tanımlarsınız ve UI yapısı doğal olarak rotalara eşlenir. Daha az boilerplate, daha iyi okunabilirlik anlamına gelir.

• JSX ile route'ları tanımlar
• Okunması ve bakımı kolay
• Çoğu React projesi için ideal

Kurulum

Tek paket kurulumu yeterlidir; v7 framework olmadan da kullanılabilir.

npm install react-router

Temel Kurulum

Uygulamanızı BrowserRouter ile sarmalayın; bu router'ın history API ile çalışmasını sağlar.

import { BrowserRouter } from "react-router";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Route Tanımlama (Declarative Mode)

Routes ve Route bileşenleri ile path-to-element eşleşmesini deklaratif şekilde yazarsınız.

import { Routes, Route } from "react-router";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/users/:id" element={<UserDetail />} />
</Routes>

Navigasyon: Link

Sayfalar arası geçiş için Link bileşeni kullanılır. Tıklamada tarayıcı yenilenmez; tamamen client-side gezinme yapılır.

import { Link } from "react-router";

<nav>
  <Link to="/">Ana sayfa</Link>
  <Link to="/about">Hakkında</Link>
</nav>

useNavigate Hook

Programatik navigasyon için useNavigate kullanılır. Form submit sonrası, login sonrası vb. yönlendirmeler için idealdir.

import { useNavigate } from "react-router";

const navigate = useNavigate();
navigate("/dashboard");
navigate(-1);            // geri
navigate("/users", { replace: true });

Route Parametreleri

:id gibi parametre tanımlanmış route'larda useParams ile değerleri okursunuz. Tipi tanımlamak için generic kullanmak iyi bir pratiktir.

import { useParams } from "react-router";

function UserDetail() {
  const { id } = useParams();
  return <p>Kullanıcı id: {id}</p>;
}

Nested Routes

Route içinde Route yazarak iç içe rotalar tanımlanır. Parent component, child route'ları Outlet ile render eder.

<Routes>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route index element={<Overview />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Outlet

Outlet, child route'un render edileceği yer için bir placeholder'dır. Layout componentlerinin parça-parça UI yapmasını sağlar.

import { Outlet } from "react-router";

export function DashboardLayout() {
  return (
    <>
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </>
  );
}

Protected Routes

Auth gerektiren rotaları sarmalamak için bir wrapper component yazılır. Kullanıcı yetkisizse Navigate ile login sayfasına yönlendirilir.

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuth = useAuth();
  if (!isAuth) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

Temel Kavramlar

API'nin omurgası şu birkaç parçadır:

• Routes & Route — path/element eşlemesi
• Link — declarative navigation
• useNavigate — programatik navigasyon
• useParams — URL parametreleri
• Outlet — child route placeholder
• Conditional routing — protected/redirect

Özet

React Router v7; declarative ve readable JSX-tabanlı routing sunar. Kurulumu kolay, ölçeklenmesi kolaydır ve çoğu React projesi için yeterlidir. Next.js kullanmıyorsanız SPA'larda standart tercihtir.