📌 React Router DOM ve Redux Temelleri

React Router DOM ve Redux Toolkit, modern React projelerinde sayfa yönlendirmesi ve global durum yönetimi için sık kullanılan kombinasyondur.

1️⃣ React Projesi Kurulumu

• Yeni bir React projesi oluşturmak için:

# Create React App
npx create-react-app my-app

# veya daha modern ve hızlı Vite
npm create vite@latest my-app

• Gerekli paketler:

npm install react-router-dom @reduxjs/toolkit react-redux

2️⃣ React Router DOM – Temel Yapı

createBrowserRouter

• createBrowserRouter ile router nesnesi oluşturulur.
• element: Ana bileşen (layout)
• errorElement: Hata sayfası
• children: Alt rotalar

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

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    errorElement: <Error />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/menu", element: <Menu />, loader: menuLoader, errorElement: <Error /> },
      { path: "/cart", element: <Cart /> },
      { path: "/order/new", element: <CreateOrder />, action: createOrderAction, errorElement: <Error /> },
      { path: "/order/:orderId", element: <Order />, loader: orderLoader, action: updateOrderAction, errorElement: <Error /> },
    ],
  },
]);

RouterProvider ile Bağlama

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

const App = () => <RouterProvider router={router} />;

Outlet Bileşeni

• AppLayout içinde <Outlet />, alt rotaların render edileceği yeri belirtir.