useParams & useSearchParams

Dynamic Routing Reactشرح useParamsشرح useSearchParamsالتنقل الديناميكي في ريأكتقراءة URL Parameters Reactكورس React كام

جدول مرجعي سريع

التوجيه الديناميكي وقراءة المعلمات (useParams & useSearchParams)

المفهوم البرمجي	useParams Hook	useSearchParams Hook
الهدف الأساسي	قراءة المتغيرات الثابتة المعرفة داخل مسار الـ URL (Path Parameters)	قراءة وتعديل متغيرات الاستعلام بالـ URL (Query Parameters)
شكل الـ URL الشائع	/courses/react-101 حيث react-101 متغير ديناميكي	/courses?sort=price&page=2 حيث القيم تأتي بعد علامة ?
الاستخدام النموذجي	فتح صفحة تفاصيل عنصر معين (مثل درس أو كورس برقم أو اسم فريد)	حفظ حالات البحث والترتيب والصفحات لتسهيل مشاركة الرابط
طريقة التعديل	يتغير مع تغير المسار المباشر عبر الانتقال بـ Link أو useNavigate	يمكن تعديله مباشرة عبر دالة التحديث لتغيير الـ URL دون مغادرة الصفحة

الشرح

عند بناء تطبيق يحتوي على مئات الدروس أو المنتجات، من المستحيل إنشاء مسار ثابت (Route) لكل درس على حدة!

بدلاً من ذلك، نستخدم المسارات الديناميكية (Dynamic Routes) لتمرير معرّف الدرس في الـ URL وقراءته داخل المكون الموحد لصفحة التفاصيل.

1. إعداد المسار الديناميكي وقراءته عبر useParams

نستخدم النقطتين الرأسيتين : للتعريف بوجود متغير ديناميكي في المسار:

أ) تعريف المسار في App.jsx:

javascript

1	// الكلمة بعد النقطتين تعتبر اسم المتغير (id)
2	<Route path="/courses/:courseId" element={<CourseDetailsPage />} />

ب) قراءة المتغير داخل صفحة التفاصيل عبر useParams:

javascript

1	import { useParams } from 'react';
2
3	function CourseDetailsPage() {
4	// سحب المتغير المسجل في المسار بنفس الاسم
5	const { courseId } = useParams();
6
7	return <div>عرض تفاصيل الكورس رقم: {courseId}</div>;
8	}

2. معلمات الاستعلام المقترنة بالبحث (useSearchParams)

تُستخدم معلمات البحث (Search/Query Params) لتخزين خيارات الفلترة أو الترتيب أو الصفحة الحالية داخل الـ URL بعد علامة ?. هذا يضمن إمكانية نسخ رابط البحث ومشاركته مع أي شخص ليرى نفس النتائج المفلتصرة تماماً!

javascript

1	import { useSearchParams } from 'react';
2
3	function CourseSearch() {
4	const [searchParams, setSearchParams] = useSearchParams();
5
6	// 1. قراءة متغير الفلتر من الـ URL (إذا لم يوجد نأخذ قيمة افتراضية)
7	const category = searchParams.get('category') \|\| 'all';
8
9	const handleCategoryChange = (newCategory) => {
10	// 2. تحديث الـ URL بقيم جديدة بدون إغلاق الصفحة!
11	setSearchParams({ category: newCategory });
12	};
13
14	return (
15	<div>
16	<p>الفئة الحالية: {category}</p>
17	<button onClick={() => handleCategoryChange('react')}>React</button>
18	<button onClick={() => handleCategoryChange('backend')}>Backend</button>
19	</div>
20	);
21	}

💡 نصيحة

استخدم useSearchParams بدلاً من useState للفلترة والصفحات!

إذا كانت لديك صفحة فلترة أو تقسيم صفحات (Pagination)، واكتفيت بتخزين رقم الصفحة أو كلمة البحث داخل useState عادية:

عندما يقوم المستخدم بعمل Refresh للصفحة، يضيع كل شيء ويعود للصفحة الأولى!
إذا قام بمشاركة الرابط مع صديقه، لن يرى الصديق النتائج المفلتصرة.

نصائح احترافية

—اجعل الـ URL هو مصدر الحقيقة الأوحد (Single Source of Truth) لحالة الفلترة والصفحات عن طريق useSearchParams بدلاً من useState البسيطة

الدرس السابق

React Router

المفهوم البرمجي

useParams Hook

useSearchParams Hook

الهدف الأساسي

قراءة المتغيرات الثابتة المعرفة داخل مسار الـ URL (Path Parameters)

قراءة وتعديل متغيرات الاستعلام بالـ URL (Query Parameters)

شكل الـ URL الشائع

/courses/react-101 حيث react-101 متغير ديناميكي

/courses?sort=price&page=2 حيث القيم تأتي بعد علامة ?

الاستخدام النموذجي

فتح صفحة تفاصيل عنصر معين (مثل درس أو كورس برقم أو اسم فريد)

حفظ حالات البحث والترتيب والصفحات لتسهيل مشاركة الرابط

طريقة التعديل

يتغير مع تغير المسار المباشر عبر الانتقال بـ Link أو useNavigate

يمكن تعديله مباشرة عبر دالة التحديث لتغيير الـ URL دون مغادرة الصفحة

1. إعداد المسار الديناميكي وقراءته عبر useParams

نستخدم النقطتين الرأسيتين : للتعريف بوجود متغير ديناميكي في المسار:

أ) تعريف المسار في App.jsx:

javascript

1	// الكلمة بعد النقطتين تعتبر اسم المتغير (id)
2	<Route path="/courses/:courseId" element={<CourseDetailsPage />} />

ب) قراءة المتغير داخل صفحة التفاصيل عبر useParams:

javascript

1	import { useParams } from 'react';
2
3	function CourseDetailsPage() {
4	// سحب المتغير المسجل في المسار بنفس الاسم
5	const { courseId } = useParams();
6
7	return <div>عرض تفاصيل الكورس رقم: {courseId}</div>;
8	}

2. معلمات الاستعلام المقترنة بالبحث (useSearchParams)

javascript

1	import { useSearchParams } from 'react';
2
3	function CourseSearch() {
4	const [searchParams, setSearchParams] = useSearchParams();
5
6	// 1. قراءة متغير الفلتر من الـ URL (إذا لم يوجد نأخذ قيمة افتراضية)
7	const category = searchParams.get('category') \|\| 'all';
8
9	const handleCategoryChange = (newCategory) => {
10	// 2. تحديث الـ URL بقيم جديدة بدون إغلاق الصفحة!
11	setSearchParams({ category: newCategory });
12	};
13
14	return (
15	<div>
16	<p>الفئة الحالية: {category}</p>
17	<button onClick={() => handleCategoryChange('react')}>React</button>
18	<button onClick={() => handleCategoryChange('backend')}>Backend</button>
19	</div>
20	);
21	}

💡 نصيحة

استخدم useSearchParams بدلاً من useState للفلترة والصفحات!

إذا كانت لديك صفحة فلترة أو تقسيم صفحات (Pagination)، واكتفيت بتخزين رقم الصفحة أو كلمة البحث داخل useState عادية:

عندما يقوم المستخدم بعمل Refresh للصفحة، يضيع كل شيء ويعود للصفحة الأولى!

إذا قام بمشاركة الرابط مع صديقه، لن يرى الصديق النتائج المفلتصرة.