React Router DOM v6.25.1 Notları ve İpuçları

İçindekiler

1. Kurulum
2. Temel Kurulum
3. Yol Bileşenleri
4. Link ve NavLink
5. URL Parametreleri
6. Sorgu Parametreleri
7. İç İçe Yollar
8. İndeks Yolları
9. Outlet
10. useNavigate Hook
11. useLocation Hook
12. Korunan Yollar
13. Temiz Yükleme
14. Hata Yönetimi
15. Loaders ile Veri Yükleme
16. Form Gönderimleri İçin İşlemler
17. TypeScript Kullanımı
18. En İyi Uygulamalar

Kurulum

Projenize React Router DOM v6.25.1'i kurmak için:

npm install react-router-dom@6.25.1
# veya
yarn add react-router-dom@6.25.1

Temel Kurulum

Uygulamanızı React Router ile kurun:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "home",
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

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

Yol Bileşenleri

Yolları nesneler kullanarak tanımlayın:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

Link ve NavLink

Yollar arasında bağlantılar oluşturun:

import { Link, NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Ana Sayfa</Link>
      <NavLink 
        to="/about"
        className={({ isActive, isPending }) =>
          isPending ? "pending" : isActive ? "active" : ""
        }
      >
        Hakkında
      </NavLink>
    </nav>
  );
}

URL Parametreleri

Yollarınızda dinamik segmentler kullanın:

const router = createBrowserRouter([
  {
    path: "users/:userId",
    element: <UserProfile />,
  },
]);

function UserProfile() {
  const { userId } = useParams();
  return <div>Kullanıcı ID: {userId}</div>;
}

Sorgu Parametreleri

Sorgu parametrelerini yönetin:

import { useSearchParams } from 'react-router-dom';

function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');

  return (
    <div>
      <h1>Arama Sonuçları: {query}</h1>
      <button onClick={() => setSearchParams({ q: 'yeni sorgu' })}>
        Sorguyu Güncelle
      </button>
    </div>
  );
}

İç İçe Yollar

İç içe yollar oluşturun:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "users",
        element: <Users />,
        children: [
          {
            path: ":userId",
            element: <UserProfile />,
          },
          {
            path: "new",
            element: <NewUser />,
          },
        ],
      },
    ],
  },
]);

İndeks Yolları

İndeks yollarını tanımlayın:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "users",
        element: <Users />,
        children: [
          {
            index: true,
            element: <UsersList />,
          },
          {
            path: ":userId",
            element: <UserProfile />,
          },
        ],
      },
    ],
  },
]);

İndeks yolları, ebeveyn yolunun yolunda ebeveyn yolundaki outlet'te render edilir.

Outlet

Alt yolları render edin:

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

function Layout() {
  return (
    <div>
      <h1>Uygulamam</h1>
      <nav>{/* navigasyon öğeleri */}</nav>
      <Outlet />
    </div>
  );
}

useNavigate Hook

Programlı olarak gezinme:

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    // Giriş işlemi mantığını gerçekleştirin
    navigate('/dashboard');
  };

  return <form onSubmit={handleSubmit}>{/* form alanları */}</form>;
}

useLocation Hook

Geçerli konumu erişin:

import { useLocation } from 'react-router-dom';

function CurrentPath() {
  const location = useLocation();
  return <div>Geçerli yol: {location.pathname}</div>;
}

Korunan Yollar

Korunan yolları uygulayın:

import { Navigate, useLocation } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const isAuthenticated = checkAuthStatus(); // Bu işlevi uygulayın
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

// Yönlendirici yapılandırmanızda
{
  path: "dashboard",
  element: (
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  ),
}

Temiz Yükleme

Yollar için temiz yüklemeyi uygulayın:

import { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';

const LazyAbout = lazy(() => import('./About'));

const router = createBrowserRouter([
  {
    path: "about",
    element: (
      <Suspense fallback={<div>Yükleniyor...</div>}>
        <LazyAbout />
      </Suspense>
    ),
  },
]);

Hata Yönetimi

Hataları errorElement ile yönetin:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorBoundary />,
    children: [
      {
        path: "products/:id",
        element: <Product />,
        errorElement: <ProductError />,
      },
    ],
  },
]);

function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div>
      <h1>Ups! Bir şeyler ters gitti.</h1>
      <p>{error.message || 'Bilinmeyen hata'}</p>
    </div>
  );
}

Loaders ile Veri Yükleme

Veri almak için loaders kullanın:

const router = createBrowserRouter([
  {
    path: "users/:userId",
    element: <UserProfile />,
    loader: async ({ params }) => {
      return fetch(`/api/users/${params.userId}`).then(res => res.json());
    },
  },
]);

function UserProfile() {
  const user = useLoaderData();
  return <div>{user.name}</div>;
}

Form Gönderimleri İçin İşlemler

Form gönderimlerini işlemlerle yönetin:

const router = createBrowserRouter([
  {
    path: "create-user",
    element: <CreateUser />,
    action: async ({ request }) => {
      const formData = await request.formData();
      const userData = Object.fromEntries(formData);
      return createUser(userData);
    },
  },
]);

function CreateUser() {
  const { state } = useNavigation();

  return (
    <Form method="post">
      <input name="name" type="text" required />
      <button type="submit">Kullanıcı Oluştur</button>
      {state === 'submitting' && <p>Gönderiliyor...</p>}
    </Form>
  );
}

TypeScript Kullanımı

React Router'ı TypeScript ile kullanın:

import { RouteObject, createBrowserRouter } from 'react-router-dom';

const router: RouteObject[] = [
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "users",
        element: <Users />,
        children: [
          {
            path: ":userId",
            element: <UserProfile />,
            loader: async ({ params }) => {
              return fetch(`/api/users/${params.userId}`).then(res => res.json());
            },
          },
        ],
      },
    ],
  },
];

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

En İyi Uygulamalar

• Yollarınızı iyi yapılandırın ve anlamlı adlar kullanın.
• performansı artırmak için lazy yüklemeyi kullanın.
• Kullanıcı deneyimini iyileştirmek için, uygulamanızda yüklenme ve hata durumlarını iyi yönetmeye özen gösterin.
• Verileri önceden yüklemek için loader'lar kullanın ve veri alma işlemlerinde asenkron işlevleri kullanın.