React useParams ve useNavigate Kullanımı
React useParams ve useNavigate Kullanımı

Selamlar!

Bu yazımızda useParams ve useNavigation hookslarına göz atacağız.

useParams() Nedir?

useParams, URL’deki parametreleri almak için kullanılır. Özellikle dinamik rotalarda (/product/:id gibi) kullanılır.

useParams() kullanımı hakkında daha fazla bilgiye buradan ulaşabilirsiniz.

Kullanım Durumu:

Bir URL’den belirli bir parametreye göre veri çekmek ya da işlem yapmak istediğinde kullanılır.

Örnek:

// Route tanımı (App.js içinde)
<Route path="/product/:id" element={<ProductDetail />} />

// ProductDetail.jsx
import { useParams } from "react-router-dom";

function ProductDetail() {
  const { id } = useParams();

  return <h2>Ürün ID: {id}</h2>;
}

URL /product/5 olduğunda id değeri "5" olarak gelir.

useNavigate() Nedir?

useNavigate, bir kullanıcıyı programatik olarak başka bir sayfaya yönlendirmek için kullanılır.

useNavigate() hakkında daha fazla bilgiye buradan ulaşabilirsiniz.

Kullanım Durumu:

  • Bir form gönderildikten sonra yönlendirme
  • Sepete ürün eklendiğinde “Sepet” sayfasına gitme gibi durumlarda kullanılır.
import { useNavigate } from "react-router-dom";

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

  const handleLogin = () => {
    // Giriş başarılıysa yönlendir
    navigate("/dashboard");
  };

  return <button onClick={handleLogin}>Giriş Yap</button>;
}

Bu örnekte kullanıcı, butona tıklayınca /dashboard sayfasına yönlendirilir.

React useParams ve useNavigate Kullanımı konusunu özetleyecek olursak;
useParam() ile URL’deki parametlereleri alırken, useNavigate() ile yönlendirme yapıyoruz.

Basit kullanım için yaptığım örneğe github hesabımdan ulaşarak BURADAN inceleyebilirsiniz.

NOT: Link ile useNavigate() ilk başta her ne kadar aynı gibi görünse de aynı amaç ile kullanılmaz.

Diğer Yazılım konularına buradan ulaşabilirsiniz.

Anladığım kadarıyla anlatmaya çalıştım. Umarım faydalı olmuştur. Başka bir blog yazısında görüşmek üzere 🙂

Gönderilere yorum yazabilir, linkedin veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.