使用react钩子处理过滤器下拉菜单时保留URL和状态

import { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function FilterDropdown() {
  const location = useLocation();
  const history = useHistory();
  const [filter, setFilter] = useState('');

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const filterValue = params.get('filter');
    setFilter(filterValue || '');
  }, [location.search]);

  const handleFilterChange = (event) => {
    const newFilter = event.target.value;
    setFilter(newFilter);

    const params = new URLSearchParams(location.search);
    if (newFilter) {
      params.set('filter', newFilter);
    } else {
      params.delete('filter');
    }

    history.push({ search: params.toString() });
  };

  return (
    <select value={filter} onChange={handleFilterChange}>
      <option value="">All</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

export default FilterDropdown;