React Provider Kullanarak Route Yapısı Oluşturma

Yiğit Enes Kaya

21 Temmuz 2025

Next.js

React Provider Kullanarak Route Yapısı Oluşturma

Modern web uygulamalarının geliştirilmesinde tercih edilen React güçlü bir Javascript kütüphanesidir. Uygulama büyüdükçe sayfa yönlendirmeleri (routing) daha karmaşık bir hale gelmektedir. Route yapısını "Provider" ve "Context API" kullanarak yönetmek modüler, okunabilir ve merkezi bir yapı sağlar.

React'te Routing ve Provider Nedir?

Routing kullanıcının istekleri doğrultusunda farklı URL'lere ve buna bağlı içeriklerin gösterilmesidir. React'te bu genellikle "react-router-dom" kütüphanesi yardımıyla sağlanır.
Provider React'ın Context API yapısında yer alan uygulama geneli veri paylaşımına olanak sağlayan yapıdır. Bu sayede merkezi bir route yapısı kurulabilir.

Route Yapısında Neden Provider Kullanılır?

Klasik yönlendirme sistemlerinde route bilgileri genellikle tek bir dosyada statik olarak tanımlanır. Ancak bu yöntem:

Modülerliği zorlaştırır.
Dinamik menü oluşturma gibi işlemleri karmaşıklaştırır.
Her bileşenin ayrı ayrı route bilgisine ulaşmasını engeller.

Buna karşılık Provider ile:

Route bilgileri bir context içinde merkezi olarak tutulur.
Menü ve içerik bileşenleri bu bilgiyi doğrudan context üzerinden çeker.
Yeni sayfa eklemek kolaylaşır; sadece ilgili yapılandırma güncellenir.

Uygulama Adımları

1. Gerekli Kütüphaneleri Kurma

npm install react-router-dom

2. Route Context Yapısını Oluşturma

// RouteContext.js
import { createContext, useContext } from "react";

const RouteContext = createContext();

export const useRoute = () => useContext(RouteContext);

export const RouteProvider = ({ children }) => {
  const routes = [
    {
      path: "/dashboard",
      name: "Dashboard",
      component: <DashboardPage />,
    },
    {
      path: "/settings",
      name: "Ayarlar",
      component: <SettingsPage />,
    },
    // İstenen miktarda route eklenebilir
  ];

  return (
    <RouteContext.Provider value={{ routes }}>
      {children}
    </RouteContext.Provider>
  );
};

3. Route'ları Ana Bileşende Kullanma

// App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { RouteProvider, useRoute } from "./RouteContext";

const AppRoutes = () => {
  const { routes } = useRoute();

  return (
    <Routes>
      {routes.map((route, index) => (
        <Route
          path={route.path}
          element={route.component}
          key={index}
        />
      ))}
    </Routes>
  );
};

function App() {
  return (
    <RouteProvider>
      <Router>
        <AppRoutes />
      </Router>
    </RouteProvider>
  );
}

4. Dinamik Menü Oluşturma (İsteğe Bağlı)

// Sidebar.js
import { NavLink } from "react-router-dom";
import { useRoute } from "./RouteContext";

const Sidebar = () => {
  const { routes } = useRoute();

  return (
    <nav>
      <ul>
        {routes.map((route, i) => (
          <li key={i}>
            <NavLink to={route.path}>{route.name}</NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
};

Sonuç

React Provider kullanarak route yönetimi uygulamanın mimarisini daha sürdürülebilir hale getirir. Route’ların merkezi olarak yönetilmesi sayesinde hem okunabilirlik artar ve kolaylık sağlar.
Bu yöntemi uygularken dikkat edilmesi gerekenler:

Route tanımlamaları tek yerde toplanmalıdır.
Context yapısı her bileşenin ihtiyaç duyduğu route verisine erişebilmesini sağlamalıdır.
Kodlar test edilip gerçek kullanım senaryolarıyla doğrulanmalıdır.

Kaynakça

Tüm Yazılar