ماهو خطاف useParams

خطاف useParams يستخدم للحصول على parameters الموجودة في رابط URL الصفحة الحالية.

تخيل أنك تملك مسارًا يعرض بيانات مستخدم معين حسب الـ ID

<Route path="/users/:id" element={<UserPage />} />

في هذا المثال :id هو معامل ديناميكي في الرابط.

إذا ذهبت إلى /users/7 مثلاً، فـ id ستكون قيمتها 7.

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

function UserPage() {
  const { id } = useParams(); // نحصل على قيمة id من الرابط

  return <h1>الرقم التعريفي للمستخدم هو: {id}</h1>;
}

ذلك خطاف من مكتبة react-router-dom ويسمح بالوصول إلى المعلمات أو الـ parameters الديناميكية الموجودة في رابط URL الحالي.

أي الرابط التالي test.com/users/ahmed المُعرف هنا هو ahmed وتلك هي صفحة المستخدم، وهنا test.com/products/123 المعُرف هو 123 وسيتم عرض صفحة المنتج الذي يمتلك ذلك المُعرف.

لذا بدلاً من إنشاء مكون منفصل لكل مستخدم أو منتج، ستقوم بإنشاء مسار ديناميكي واحد في React Router باستخدام النقطتين الرأسيتين :

<Route path="/users/:username" element={<UserProfile />} />
<Route path="/products/:productId" element={<ProductDetails />} />

أي ستحتاج إلى استخدامه لبناء صفحات ديناميكية، من خلال بناء مكون واحد مثل UserProfile, ProductDetails, ArticlePage قادر على عرض بيانات لآلاف العناصر المختلفة، بمعنى صفحة تفاصيل منتج في أمازون، صفحة بروفايل مستخدم في فيسبوك، صفحة مقال في مدونة، ويختلف محتواها باختلاف المُعرف الذي في الرابط.

كذلك جلب البيانات من الـ API بشكل فعال، باستخدام المعرف ID المستخرج من useParams لإرسال طلب محدد إلى الـ API، كالتالي:

const { postId } = useParams();
useEffect(() => {
  fetch(`https://api.test.com/posts/${postId}`)
    .then(res => res.json())
    .then(data => setPost(data));
}, [postId]); 

أيضًا عند قيام المستخدم بنسخ الرابط وإرساله لشخص آخر، ويفتحه ذلك الشخص، سيرى نفس الصفحة بنفس المحتوى تمامًا، بسبب المُعرف الذي في الرابط.