إدارة الحالة في معاملات البحث ضمن URL

لماذا نخزّن الحالة في عنوان URL؟

‏useSearchParams Hook

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

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const page = Number(searchParams.get('page') || 1);
  // ...
}

قراءة معامل واحد

const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';

كتابة المعاملات من دون تنقل

function SortButton({ field }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const handleClick = () => {
    setSearchParams(prev => {
      prev.set('sort', field);
      prev.set('page', '1');
      return prev;
    });
  };
  return <button onClick={handleClick}>Sort by {field}</button>;
}

الحفاظ على المعاملات الأخرى عند التحديث

setSearchParams(prev => {
  prev.set('q', newQuery);
  // 'sort' and 'page' are unchanged
  return prev;
});

مزامنة إدخال مع معاملات البحث

function SearchBar() {
  const [params, setParams] = useSearchParams();
  const q = params.get('q') || '';
  return (
    <input
      value={q}
      onChange={e => setParams(prev => {
        prev.set('q', e.target.value);
        prev.set('page', '1');
        return prev;
      })}
    />
  );
}

العلامات المنطقية في معاملات البحث

const showFilters = searchParams.has('filters');

const toggleFilters = () => {
  setSearchParams(prev => {
    if (prev.has('filters')) prev.delete('filters');
    else prev.set('filters', '1');
    return prev;
  });
};

قيم المصفوفات في معاملات البحث

// URL: /products?tag=react&tag=typescript
const tags = searchParams.getAll('tag'); // ['react', 'typescript']

// Setting multiple values:
const newParams = new URLSearchParams();
selectedTags.forEach(t => newParams.append('tag', t));
setSearchParams(newParams);

استبدال السجل مقابل دفعه

setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });

اشتقاق الحالة من المعاملات

const rawPage = searchParams.get('page');
const page = Math.max(1, parseInt(rawPage || '1', 10));

const rawSort = searchParams.get('sort');
const sort = ['name', 'price', 'date'].includes(rawSort) ? rawSort : 'name';

إنشاء الروابط باستخدام معاملات البحث

<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
  Sort by Price
</Link>

تحقق سريع

مراجعة