كيف تقوم بتحديث query params برمجيًا في react-router؟

يمكنك استخدام ال history عند الضغط على زرار مثلاً

onBtnClick = () => {
  history.replace('/shop/Clothes/Dresses?color=blue');
}

// /shop/Clothes/Dresses?color=blue ويضع الرابط الجديد  /shop/Clothes/Dresses يقوم باستبدال المكان الحالي 

يمكنك أن تستخدم الخطاف useHistory لتحقيق ذلك 

• قم بإستيراد الخطاف 

• import { useHistory } from "react-router-dom"

• قم بإستدعاءه داخل المكون 

const history = useHistory()

• قم بإنشاء الدالة المسئوله عن التعامل مع هذا الحدث

  const handleParams = (query) => {
    const params = new URLSearchParams();
    if (query) {
      params.append("color", query);
    } else {
      params.delete("color");
    }
    history.push({ search: params.toString() });
  };

وبهذا يمكنك تنفيذ ماتريد. 

• يمكنك أيضا أن تجعل قيمة ال query عباره عن قيمه مخزنه داخل ال state وتستخدم الدالة في الخطوة رقم 3 مع useEffect لتحديث ال query في حالة كنت تريد مثلا إستخدام مدخل للبحث أو شئ من هذا القبيل كالتالي 

• const SearchInput = () => {
    const [query, setQuery] = useState("");
    const history = useHistory();
  
    const  onChange = (e) => {
      setQuery(e.target.value);
    }
  
    useEffect(() => {
      const params = new URLSearchParams();
      if (query) {
        params.append("color", query);
      } else {
        params.delete("color");
      }
      history.push({ search: params.toString() });
  
    }, [query, history]);
  
    return <input type="text" value={query} onChange={onChange} />;
  };