شرح صفوف ومحتوى الفقرة
بينما تحدد مقاطع المسار هوية المورد المعروض، تضبط معاملات الاستعلام (Query Strings مثل ?level=beginner&q=hooks) طريقة التصفية والفرز والترقيم. يوفر خطاف useSearchParams() زوجاً يشبه useState لكنه متزامن مباشرة مع شريط العنوان.
نقرأ القيم عبر searchParams.get("level") التي تعيد null عند غياب المعامل، ونحدّث العنوان بسلاسة باستدعاء setSearchParams({ level: "advanced" }).
HTML
function FilterableLessons() {
const [params, setParams] = useSearchParams();
const level = params.get('level') || 'all';
return (
<button onClick={() => setParams({ level: 'pro' })}>
Active Filter: {level}
</button>
);
}