React Router DOM Hooklar

React Router DOM ve Redux Projesi

🔗 Link ve NavLink

• Link: Sayfalar arası geçiş için kullanılır.
• NavLink: Aynı işlevi görür, ancak aktif olan linke otomatik active class ekler.

⚡ URL ve State Yönetimi

• useParams: URL’deki dinamik parametreleri alır.
• Global state yerine URL kullanımı: Dinamik veri yönetimi için state yerine URL parametreleri tercih edilebilir.
• useNavigate: Programatik olarak URL değiştirir.
  • navigate(-1) → bir adım geri.
• Navigate bileşeni: Belirli bir route’a yönlendirme sağlar.
  • replace → geçmiş kaydını değiştirir, geri gitmeyi engeller.
• <Outlet />: Nested route’ların render edildiği çıkış noktası.

⚙ Router Kurulumu

• createBrowserRouter: Tarayıcı tabanlı router oluşturur.
• RouterProvider: Router objesini uygulamaya entegre eder.

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

<RouterProvider router={router} />

• path: URL yolunu belirler.
• element: URL’ye gidildiğinde render edilecek bileşen.
• loader: Sayfa render edilmeden önce veri çekmek için.