React Router’un modern kurulumu: createBrowserRouter ile adım adım rehber

React uygulamalarında yönlendirmeyi yönetmek, projenin büyüklüğü arttıkça daha da karmaşık hale gelebilir. Eski yöntemler olan BrowserRouter ve Routes kullanımı artık yerini modern React Router yaklaşımına bırakıyor. createBrowserRouter fonksiyonu, projenizi daha ölçeklenebilir, bakımı kolay ve gelişmiş özelliklere hazır hale getiriyor.

React Router’un yeni nesil API’si olan createBrowserRouter, özellikle büyük uygulamalar için ideal bir çözüm sunuyor. Bu yöntem sayesinde yerleşik düzenler (layouts), veri yükleyicileri (loaders), eylemler (actions) ve korumalı rotaları (protected routes) kolaylıkla uygulayabilirsiniz. Peki bu modern yaklaşım nasıl kurulur? İşte adım adım rehberimiz.

Neden createBrowserRouter kullanmalısınız?

React Router’un eski versiyonlarında, yönlendirme işlemlerini uygulamaya doğrudan dahil etmek yaygın bir uygulamaydı. Ancak createBrowserRouter, bu süreci tamamen değiştiriyor. İşte bu yeni yaklaşımın sunduğu başlıca avantajlar:

• Temiz ve organize yapı: Tüm rotalar ayrı bir dosyada tanımlanarak proje daha okunabilir ve bakımı kolay hale geliyor.
• İç içe düzenler (nested layouts): Uygulamanızın farklı bölümlerinde ortak bileşenler (header, footer gibi) kullanmanızı sağlıyor.
• Veriye dayalı sayfalar: API’lerden veri yüklemeyi ve göndermeyi destekliyor.
• Korumalı rotalar: Kullanıcı doğrulamasını kolayca entegre edebilmenizi sağlıyor.
• Ölçeklenebilirlik: Büyük projelerde bile performansı ve organizasyonu koruyor.

Bu özellikler, React uygulamalarınızdaki yönlendirme yönetimini bir adım öteye taşırken, aynı zamanda geliştirme sürecini de basitleştiriyor.

Adım 1: React Router’u projenize ekleyin

Modern React Router kullanımı için ilk adım, gerekli paketi projenize yüklemektir. Terminalinizde aşağıdaki komutu çalıştırın:

npm install react-router-dom

Kurulum tamamlandıktan sonra, projenizin dosya yapısını düzenlemek için bir şablon oluşturabilirsiniz. Önerilen klasör yapısı şu şekilde olabilir:

src/
├── layouts/
│   └── MainLayout.jsx
├── pages/
│   ├── Home.jsx
│   ├── Products.jsx
│   ├── ProductDetails.jsx
│   ├── Cart.jsx
│   └── NotFound.jsx
├── routes/
│   └── index.jsx
├── App.jsx
└── main.jsx

Bu yapı, uygulamayı büyütürken bile dosyaların kolayca bulunmasını ve yönetilmesini sağlar. Rotaların ayrı bir klasörde tutulması, özellikle büyük projelerde geliştirici deneyimini önemli ölçüde iyileştirir.

Adım 2: createBrowserRouter’unu oluşturun

React Router’un modern kurulumunda, tüm rotalar bir merkezden yönetilir. Bunun için src/routes/index.jsx adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:

import { createBrowserRouter } from "react-router-dom";
import MainLayout from "../layouts/MainLayout";
import Home from "../pages/Home";
import Products from "../pages/Products";
import ProductDetails from "../pages/ProductDetails";
import Cart from "../pages/Cart";
import NotFound from "../pages/NotFound";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <MainLayout />,
    children: [
      { index: true, element: <Home /> },
      { path: "products", element: <Products /> },
      { path: "products/:id", element: <ProductDetails /> },
      { path: "cart", element: <Cart /> },
    ],
  },
  { path: "*", element: <NotFound /> },
]);

Bu yapıda, ana düzen olan MainLayout altında yer alan tüm alt rotalar, children dizisi içinde tanımlanıyor. /products/:id gibi dinamik parametreler de bu şekilde kolayca yönetilebiliyor. Tanımlanan bu router nesnesi, daha sonra uygulamanın ana giriş noktasında kullanılacak.

Adım 3: main.jsx dosyasını yapılandırın

Uygulamanın kök dosyası olan main.jsx, React’in en yeni özelliklerini destekleyecek şekilde yapılandırılmalıdır. Aşağıdaki kod parçası, modern React Router kullanımını göstermektedir:

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./routes";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Bu yapı, RouterProvider bileşenini kullanarak tanımlanan router nesnesini uygulamaya enjekte eder. Bu yaklaşım, React’in yeni versiyonlarında önerilen modern bir uygulama modelidir.

Adım 4: Düzen bileşeni oluşturun

Yerleşik düzenler (nested layouts), uygulamanın farklı bölümlerinde ortak bileşenlerin kullanımını sağlar. Örneğin, tüm sayfalar için sabit bir header ve footer kullanabilirsiniz. Aşağıdaki MainLayout.jsx örneğini inceleyin:

import { Outlet } from "react-router-dom";

const MainLayout = () => {
  return (
    <>
      <header>Uygulama Menüsü</header>
      <main>
        <Outlet />
      </main>
      <footer>Alt Bilgi</footer>
    </>
  );
};

export default MainLayout;

Burada kullanılan <Outlet /> bileşeni, yerleşik olan alt rotaların (children) ekrana render edilmesini sağlar. Bu sayede, header ve footer tüm sayfalarda sabit kalırken, içerik kısmı dinamik olarak değişir.

Temel rotaların listesi

Aşağıdaki tabloda, uygulamada tanımlanan temel rotalar ve karşılık gelen bileşenler yer almaktadır:

• / → Home.jsx
• /products → Products.jsx
• /products/:id → ProductDetails.jsx
• /cart → Cart.jsx
• * → NotFound.jsx (404 sayfası)

Bu yapı, uygulamaya yeni sayfalar eklemek istediğinizde bile kolayca genişletilebilir.

Sonraki adımlar: neler yapılabilir?

createBrowserRouter kullanarak temel kurulumu tamamladıktan sonra, uygulamaya daha gelişmiş özellikler ekleyebilirsiniz. İşte yapabileceklerinizden bazıları:

• Korumalı rotalar: Kullanıcı doğrulaması gerektiren sayfalar için koruma katmanları ekleyin.
• Yetkilendirme (authentication): Kullanıcı giriş sistemlerini entegre edin.
• Dinamik rotalar: URL parametreleriyle çalışan sayfalar oluşturun.
• Veriye dayalı yükleyiciler: API’lerden veri çekmek için loaders kullanın.
• Hatalı sayfalar: Uygulama hatalarını yönetmek için özel 404 ve hata sayfaları tasarlayın.
• Tembel yükleme: Uygulamanın performansını artırmak için sayfaları tembel yükleyin.
• Gerçek dünya projesi: Bu yapıyı kullanarak tam ölçekli bir e-ticaret uygulaması geliştirin.

React Router’un modern yaklaşımı, geliştiricilere daha temiz, ölçeklenebilir ve bakımı kolay uygulamalar oluşturma imkanı sunuyor. Bu rehberde gösterilen adımları takip ederek, projelerinizi daha verimli bir şekilde yönetebilirsiniz. Gelecekteki projelerinizde bu yapıyı kullanarak, React uygulamalarınızın performansını ve organizasyonunu önemli ölçüde artırabilirsiniz.