تعطيل الطلب السابق للخادم عندما تتغير الصفحة ب react -router

يمكنك عمله عن طريق

1. تعيين cancelToken عند الدخول للcomponent
2. تمرير ال cancelToken لل request عن طريق ال options object
3. عند الخروج من المكون تقوم بإلغاء ال request عن طريق ال cancelToken

   import React from 'react';
   import axios from 'axios';
   
   
   
   export default function test() {
     const [data, setData] = useState(null);
     
     const source = useMemo(() => axios.CancelToken.source(), [axios]); //CancelToken هنا تقوم بتعريف 
     
     useEffect(() => {
       axios
         .get(endpoint, { cancelToken: source.token }) // نقوم بإعطائه للطلب
         .then((res) => {
           setData(res.data);
         })
         .catch((err) => {
           console.log(err);
         });
       
       return () => { // عند الخروج نقوم باستدعائه
         if (source) {
           source.cancel("تم إلغاء الطلب");
         }
       }
     }, [input]);
     return (
       <div>
         {data &&
           data.map((post) => (
             <div>
               <img src={post.image} alt="" />
               <h1>{post.title}</h1>
             </div>
           ))}
       </div>
     );
   }