اذهب إلى المحتوى
  • 0

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

Rayden Storm

السؤال

Recommended Posts

  • 1

يمكنك أن تستخدم الخطاف 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} />;
    };

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...