شرح صفوف ومحتوى الفقرة
أخيراً، يعيد خطاف useLocation() كائن الموقع الحالي كاملاً متضمناً المسار pathname، ونص الاستعلام search، والمرساة hash، والمفتاح الفريد key. يُوظف هذا الخطاف لبناء شريط فتات الخبز الديناميكي أو التمرير لأعلى الصفحة عند تغير المسار. يلخص الجدول التالي متى تستخدم كل أداة:
| الخطاف أو الآلية | البيانات المقروءة أو المدارة | حالة الاستخدام الهندسية المثلى |
|---|---|---|
useParams() | مقاطع المسار المتغيرة مثل :slug | جلب وعرض صفحة تفاصيل دورة أو طلب محدد |
useSearchParams() | معاملات الاستعلام الواقعة بعد علامة ? | فلاتر التصنيف والترتيب وأرقام الصفحات القابلة للمشاركة |
useLocation() | كائن pathname وsearch وhash | مزامنة فتات الخبز والتمرير لأعلى الصفحة وتتبع الزيارات |
خطاف useState() المحلي | حالة مؤقتة خاصة بذاكرة المكون فقط | فتح النوافذ المنبثقة ومسودات الحقول قبل الإرسال |
function LocationReadout() {
const { pathname, search, hash } = useLocation();
return (
<div className="meta">
<p>Path: {pathname} | {search || 'none'}</p>
<p>Anchor Hash: {hash || 'none'}</p>
</div>
);
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تعريف المقاطع الديناميكية في المسارات وقراءتها بخطاف useParams، وتأمين الواجهة عند غياب العنصر المطلوب، ومزامنة فلاتر البحث القابلة للمشاركة عبر useSearchParams وفحص بيانات العنوان الكاملة بخطاف useLocation. الخطوة التالية: انتقل الآن إلى الدرس رقم 50 «المسارات المتداخلة والتخطيطات المشتركة عبر Outlet» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.