การจัดการสถานะในพารามิเตอร์ค้นหาของ URL

เหตุใดจึงต้องเก็บสถานะไว้ใน URL

ฮุก useSearchParams

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>

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน